Having trouble recreating button design in css-CodePudding

How would I recreate this effect in CSS ? It should be two separate buttons that link to different information but I would like to have them placed and shaped like this.

CodePudding user response：

I tried my best to solve your error and get answer which you want but there are some little mistake in code about button border so please make sure that you can solve it.

Thank you

input#button1 {
    width: 50%;
    height: 50%;
    clip-path: polygon(0 1%, 100% 0%, 75% 100%, 0 100%);
    border: 5px solid;
    background-color: #ffefe2;
    position: fixed;
    border-radius: 25px;
      right: 48%;
    z-index: 11;
}
input#button2 {
    float: right;
    width: 50%;
    height: 50%;
    clip-path: polygon(27% 0, 100% 0%, 100% 100%, 0 100%);
    border: 5px solid;
    background-color: #ffffff;
    position: fixed;
    left: 45%;
    border-radius: 25px;
}

<div >
<input type="submit" id="button1" value="Button1">
<input type="submit" id="button2" value="Button2">
</div>

i hope this code will help you.....

you can also use this website to get different buttons and codes https://getcssscan.com/css-buttons-examples

CodePudding user response：

so i try to use div instead of a button and this is what i get

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.flex {
    display: flex;
}

.button1 {
    height: 0;
    width: 150px;
    border-top: 150px solid green;
    border-right: 100px solid transparent;
    margin-right: -100px;
}

.button2{
    height: 0;
    width: 150px;
    border-bottom: 150px solid blue;
    border-left: 100px solid transparent;
}

<div >
        <div >
            <div >
                1
            </div>
            <div >
                2
            </div>
        </div>
    </div>

now to turn the div into a button we can use javascript. If you havent learn javascript maybe learn how to manipulate the DOM and add n eventlistener on click.

learn the Dom : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#active_learning_basic_dom_manipulation onclick : https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

i hope it help