定位css形三角形

Question

我正在尝试在div中放置一个css形状的三角形。

这是CSS：

/*Outer DIV*/

div.auth { 
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;

/*Triangle DIV*/

div.arrow {
   width: 0.5em;
   height: 65%;
   background-color: #000;
   position: relative;} 

   div.arrow::after {
    display: block;
    content: '';
    position: absolute;
    left: -60%;
    transform: translateY(80%);
    bottom: -1em;
    border-style: solid;
    border-width: 1em 1em 0 1em;
    border-color: transparent transparent transparent #000;
    }

期望的结果：

https://jsfiddle.net/k1x1car4/

如何以更简单，更精确的方式进行相同的展示？ 谢谢！

Answer 1

我不知道您是否能够更改div.arrow，但如果是这样，我建议您根本不要使用伪元素，只需将三角形直接放入div.arrow即可。然后，您可以使用

进行定位

position: absolute
left: 0;
bottom: 0;

注意：您必须将position:relative添加到div.auth，以便position:absolute能够使用div.arrow。

div.auth {
  display: block;
  background: powderblue;
  padding: 0.5rem;
  margin-bottom: 1rem;
  width: 90%;
  border: 1px solid black;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgb(204, 204, 204);
  border-left: 3px solid #ccc;
  font-family: "T3";
  text-align: right;
  position: relative;
}

div.arrow {
  display: block;
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 1em 1em 0 1em;
  border-color: transparent transparent transparent #000;
  left: 0;
  bottom: 0;
}

<div class="auth">
  <div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>

Answer 2

只需在父 div上使用.arrow类和伪元素。

无需在此内容中为样式创建实际 HTML。

然后定位元素bottom:0和left:0。简单！

＆＃13;

＆＃13;

div.auth {
  background: powderblue;
  padding: 0.5rem;
  margin-bottom: 1rem;
  width: 90%;
  border: 1px solid black;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgb(204, 204, 204);
  border-left: 3px solid #ccc;
  font-family: "T3";
  text-align: right;
}

div.arrow {
  position: relative;
}

div.arrow::after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  border-style: solid;
  border-width: 1em 1em 0 1em;
  border-color: transparent transparent transparent #000;
}

＆＃13;

<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>

＆＃13;

＆＃13;

＆＃13;