Janith Chinthana Janith Chinthana - 3 months ago 15
CSS Question

rectangle with right hand side triangle outline only

I found following css code to create rectangle plus right hand side triangle



div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}

div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red

}

<div>Play</div>





how should I do the same thing, but only with the outline ?

sample image would be like bellow(number 2 box): enter image description here

Answer

Play around with :after positioned over :before to create border.

div{
  position: relative;/*it important to set this to relative to be able to use :before in absolute*/
  width: 60px;
  height: 40px;
  background: white;
  border: 1px solid red;
}

div:before{
  content: '';
  position:absolute;
  left: 100%;
  top: -1px;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 21px solid red

}

div:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  margin-right: -2px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid white;

}
<div>Play</div>