Is it possible to make such a shape on CSS (only one part)?

enter image description here

    3 answers 3

    Did everything for you

    .figure { margin-top: 50px; width: 200px; height: 50px; background: green; position: relative; } .figure::before { content: ''; position: absolute; /* Абсолютное позиционирование */ left: 20px; /* Положение треугольника */ border: 10px solid transparent; /* Прозрачные границы */ border-bottom: 20px solid green; /* Добавляем треугольник */ transform: scaleX(10); left:90px; top:-30px; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="figure"></div> </body> </html>

      Triangle through border + rectangle https://jsfiddle.net/skywave/6g8ft03q/

      html:

       <div class="shape"> <div class="top"></div> <div class="bottom"></div> </div>

      css:

       .top { width: 0; height: 0; border-bottom: 20px solid green; border-right: 40px solid transparent; border-left: 40px solid transparent; } .bottom { width: 80px; height: 30px; background: green; }

        You can also try to do it in the generators:

        codepen.io/blazeeboy/pen/bCaLE

        Or more cool stuff: http://tridiv.com/