Создание формы пирамиды с использованием только CSS / HTML

Я пытаюсь создать пирамиду, подобную форме в CSS. Я делаю это с помощью метода, о котором я читал в интернете, что когда вы установите ширину Div в 0 px, его границы присоединятся к созданию 4 треугольников. но я хочу удалить / вырезать заостренную вершину пирамиды, и я не смог этого сделать. Я попытался скрыть наконечник с другим DIV, но это не выглядит правильно.

нынешнем виде: Ниже то, что я сделал так далеко.

enter image description here

требуемой форме: Что я хочу такую фигуру:

enter image description here

вот мой код:

#pyramid {
  width: 0px;
  border-left: 20px dotted transparent;
  border-right: 20px solid transparent;
  border-bottom: 50px solid blue;
}
<div id="pyramid"></div>
8
css css-shapes css3 html

3 ответов

добавление любой ширины к вашему div сделает трюк. При этом у вас будет 3 связанных фигуры: 2 треугольника и 1 прямоугольник между ними.

#pyramid {
  width: 5px;
  border-left: 20px dotted transparent;
  border-right: 20px solid transparent;
  border-bottom: 50px solid blue;
}
<div id="pyramid"></div>
12

можно использовать perspective() и rotateX() чтобы создать форму, как это

.pyramid  {
  width: 25px;
  height: 50px;
  background: blue;
  margin: 20px 100px;
  transform: perspective(6px) rotateX(11deg);
}
<div class="pyramid "></div>
2

Я поместил маленький белый треугольник на верхнем краю большого синего треугольника

.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 150px 50px;
	border-color: transparent transparent #007bff transparent;
	position: relative;
}
.triangle::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	top: -1px;
	left: -5px;
}
<div class="triangle"> </div>

здесь ссылка на треугольник css из CSS-Trick.com

еще вы можете легко генерировать с помощью это онлайн-приложение

2