Marik Zuckor Marik Zuckor - 2 years ago 264
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 Source

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 > 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 class="triangle rightTriangle">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download