Marik Zuckor Marik Zuckor - 6 months ago 11
HTML Question

How to create triangle's form with inputs and button?

enter image description here

This question is duplicate so i 'll be very fun if you give me s

Answer

You can create triangle shape using CSS border like this example

.form {
    width: 400px;
    height: 80px;
    margin: 0px auto;
    background: #1E9BAF;
    position: relative;
    box-shadow: -7px 15px 0px -5px rgba(0, 0, 0, 0.3);
}

.triangle, 
.triangle > div {
    width: 0px;
    height: 0px;
    position: absolute;
    border: 40px solid transparent;
}

.leftTriangle {    
    left: -55px;
    border-right: 15px solid #1E9BAF;
}

.leftTriangle > div {
  left: -42px;
  top: -30px;
  z-index: -1;
  border-right: 15px solid rgba(0, 0, 0, 0.3);
}   

.rightTriangle {
    right: -55px;
    border-left: 15px solid #1E9BAF;
}

.rightTriangle > div {
  right: -28px;
  top: -30px;
  z-index: -1;
  border-left: 15px solid rgba(0, 0, 0, 0.3);
} 
<div class="form">
    <div class="triangle leftTriangle">
        <div></div>
    </div>
    <div class="triangle rightTriangle">
        <div></div>
    </div>
</div>