在三角形元素上添加边框

Question

我正在尝试围绕三角形创建边框。到目前为止我有这个：

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>

但我无法为before元素添加边框。如何在底部（'before`元素）上突出的部分周围添加边框？

（我看到this question，但我不能对此应用相同的原则，因为它的形状不同。）

Answer 1

尝试添加 ::after 以及更多 border-width 和不同位置的底部和右侧，它的工作非常好。不要忘记将 border-color 更改为 black 并将 z-index 降低到的 -1

示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Fiddle demo

Answer 2

添加位于蓝色三角形后面的:after元素。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您也可以使用SVG作为形状。

您使用polygon标记创建三角形：

<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 */

代码段：

.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>