CODEWITHSUNDEEP
css
Janith Chinthana
Janith Chinthana

Reputation: 3844

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

Upvotes: 1

Views: 75

Answers (1)

Justinas
Justinas

Reputation: 43507

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>

Upvotes: 3

Related Questions