在三角形元素上添加边框 [英] Add border over triangle element

问题描述

我想在三角形周围创建边框。我到目前为止：

JSFiddle

  .myDiv {width：300px; padding：15px; text-align：right;背景颜色：lightblue;位置：相对; 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。 

$>

但我不能添加一个边框到之前的元素。如何在底部添加一个边框（'before`元素）？

（我看到这个问题，但我不能应用相同的原则，因为它的形状不同。）

解决方案

尝试添加 ::之后 border-width 和底部和右边不同的位置，它的工作非常好。不要忘记将 border-color 更改为 黑色 -1 ，将 z-index 低调。

示例：

---

  .myDiv {width：300px; padding：15px; text-align：right;背景颜色：lightblue;位置：相对; 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。 

$>