Добавить границу над элементом треугольника

Я пытаюсь создать границу вокруг треугольника. У меня это до сих пор:

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`)?

(я видел этот вопрос, но я не могу применить к нему тот же принцип, поскольку это разные формы.)

+5
источник поделиться
3 ответа

Попытайтесь добавить ::after с более border-width и по-разному положением внизу и справа, его работа очень хорошо. Не забудьте изменить border-color на black, а ниже z-index на -1 > .

Пример:


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

Скриншот

+6
источник

Добавьте элемент :after, расположенный за синим треугольником.

.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>
0
источник

Вы также можете использовать 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>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос