How to make responsive triangle with css

Question

I have a grid made with bootstrap, with a column for an image and a column for the text. I have to create a triangle on the left side of the text column, that overlaps the image and it must be responsive. Depending on the height of the container it must always be in the middle. How can I do?

<div class="row no-gutters">
    <div class="col-6">
      <img src="http://placehold.it/200x200" class="w-100" alt="">
    </div>
    <div class="col-6 ">
      <p>lorem ipsum dolor</p>
    </div>
</div>

the results should be like this: https://i.stack.imgur.com/W0jhq.jpg

Possible duplicate of [Box with a triangle like a chat](https://stackoverflow.com/questions/36921229/box-with-a-triangle-like-a-chat) — disinfor, Oct 10 '19 at 18:25

Libra · Answer 1 · 2019-10-10T19:03:03.773

A triangle can be made in CSS by creating a 0x0 div with borders the desired width of the triangle. You need to set all but one side of this div's border-color to transparent. here's an example:

.triangle{
  height: 0px;
  width: 0px;
  border: 20px solid transparent;
  border-right: 25px solid white;
  position: absolute;
  right: 0;
  top: 90px;
}

Here's a pen where I created what you wanted as an example.

How to make responsive triangle with css

1 Answers1