1

I am trying to code a responsive div with css triangles on each side that has a color the same as my background color, however it breaks when the text gets wraps onto a new line.

Is there any way to code css triangles in a responsive way, where the triangles will grow in height with the text that is wrapping?

enter image description here

.d-block {
  background-color: #fff;
  height: 60px;
  padding: 0;
  margin: 30px 0 0 0;
  color: #0769ba;
  font-size: 1.8rem;
  &:before {
    position: absolute;
    left: 0;
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid #fff;
    border-left: 30px solid #0769ba;
  }
  &:after {
    position: absolute;
    right: 0;
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid #fff;
    border-right: 30px solid #0769ba;
  }
}
<div class="d-block">This is a specials block and is 100% wide responsive</div>
Sumit patel
  • 3,807
  • 9
  • 34
  • 61
ottz0
  • 2,595
  • 7
  • 25
  • 45

0 Answers0