[Solved] CSS for text inside a ribbon/pennant type shape [closed]

by


There are multiple ways to do this. But you can split it in 2 separate shapes.

Rectangular shape ( background of the text ) and a triangle using a pseudo element.
See below

Tweak around with the border values of the after element to achieve exactly the shape you want.

span {
  position:relative;
  color: white;
  background: blue;
  padding: 10px 0 10px 10px;
  margin-top: 10px;
  display: inline-block;
}
span:after {
  width: 0; 
  height: 0; 
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 20px solid blue;
  position: absolute;
  right: 0;
  transform: translateX(100%);
  content: '';
  top: 0;
}
<span>
   My Text
</span>

2

solved CSS for text inside a ribbon/pennant type shape [closed]