CODEWITHSUNDEEP
htmlcsscss-shapes
John St
John St

Reputation: 269

border radius top left on triangle using CSS

I have this code 

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: #c00000 transparent transparent transparent;
  float: left;
  position: absolute;
  top: 8px;
}
<div></div>

How can I apply border radius top left to above CSS triangle? It seem like impossible here.

Upvotes: 7

Views: 4987

Answers (2)

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

Wrap it inside a parent div and give the parent border

http://jsfiddle.net/o6y997ds/

<div class="parent"><div class="div"></div></div>
.parent{
        border-radius:10px 0px 0px 0px;  
        overflow:hidden; 
       }

Upvotes: 8

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

  • First set equal border-width on all the sides
  • Then add border-color to top and left and set right and bottom transparent

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px;
  border-color: #c00000 transparent transparent #c00000;
  float: left;
  position: absolute;
  top: 8px;
  border-radius: 10px 0px 0px 0px;
}
<div></div>

with box-shadow you can use a pseudo element for giving a box-shadow

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px;
  border-color: #c00000 transparent transparent #c00000;
  float: left;
  position: absolute;
  top: 8px;
  border-radius: 10px 0px 0px 0px;
}
div:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 155px;
  top: -55px;
  left: 54px;
  transform: rotate(45deg);
  transform-origin: left top;
  box-shadow: 2px 1px 6px 1px red;
}
<div></div>

Upvotes: 15

Related Questions