Add border above triangle element

Question

I am trying to create a border around a triangle. I still have this:

Jsfiddle

.myDiv { width: 300px; padding: 15px; text-align: right; background-color: lightblue; position: relative; border: 1px solid black; } .myDiv::before { content: ""; position: absolute; bottom: -20px; right: 20px; border-right: 20px solid lightblue; border-bottom: 20px solid transparent; } 

 <div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div> 

But I cannot add a border to the before element. How to add a border around a figure that sticks out at the bottom (the "before` element)?

(I saw this question , but I cannot apply the same principle to it, since these are different forms.)

Answer 1

Try to add ::after with a more border-width and different position at the bottom and right, its work very well. Remember to change border-color to black , and below z-index to -1 >.

Example:

---

 .myDiv { width: 300px; padding: 15px; text-align: right; background-color: lightblue; position: relative; border: 1px solid black; } .myDiv::before { content: ""; position: absolute; bottom: -20px; right: 20px; border-right: 20px solid lightblue; border-bottom: 20px solid transparent; } .myDiv::after { z-index:-1; content: ""; position: absolute; width: 0; height: 0; bottom: -22px; right: 19px; border-right: 21px solid black; border-bottom: 21px solid transparent; } 

 <div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div> 

Screenshot

Answer 2

Add the :after element, located behind the blue triangle.

 .myDiv::after { content: ""; position: absolute; bottom: -22px; right: 19px; border-right: 21px solid black; border-bottom: 21px solid transparent; z-index: 9; } 

 .myDiv { width: 300px; padding: 15px; text-align: right; background-color: lightblue; position: relative; border: 1px solid black; } .myDiv::before { content: ""; position: absolute; bottom: -20px; right: 20px; border-right: 20px solid lightblue; border-bottom: 20px solid transparent; z-index:10; } .myDiv::after { content: ""; position: absolute; bottom: -22px; right: 19px; border-right: 21px solid black; border-bottom: 21px solid transparent; z-index: 9; } 

 <div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div> 

Answer 3

You can also use SVG for a figure.

You create a triangle with the polygon tag:

 <polygon class="triangle" /* CSS Styling, if you want properties instead of inline attributes */ fill="currentColor" /* To be able to change the fill with the property color in CSS */ stroke="#000" /* Match your border color */ stroke-dasharray="0, 30, 90" /* To remove the stroke from the "top" part of triangle */ points="30,4 60,4 60,30" /> /* The whole triangle figure */ 

---

Code snippet:

 .myDiv { width: 300px; padding: 15px; text-align: right; background-color: lightblue; position: relative; border: 1px solid black; } .myDiv svg { position: absolute; right: 20px; bottom: -59.7px; color: lightblue; } 

 <div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <svg height="64" width="64" viewBox="0 0 64 64"> <polygon class="triangle" fill="currentColor" stroke="#000" stroke-dasharray="0, 30, 90" points="30,4 60,4 60,30" /> </svg> </div>