Triangular figure with css

Question

Triangular figure with css

Navigation

#1 by (1 votes)

0

How can I make the following figure:

probe with border-radius but the tip turns round and the sides curl, I need the tip to be straight and the sides are not curved.

my code is:

.Back {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius:20px 20px 0 0 ;
  top: 0;
  right: 0;
}

<div class="Back">
</div>

css

asked by hubman 05.12.2017 в 23:39

source

1 answer

Onclick event on touch screen Select max ID in PHP

score 1 · Accepted Answer

You can try the following:

#contForm{
  width: 270px;
}

#topForm{
    width: 150px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;
}

#bottomForm{
   height: 250px;
   background-color: #428bca;
}

<div id="contForm">
  <div id="topForm"></div>
  <div id="bottomForm"></div>
</div>