Как сделать такой же блок?

Question

alaskafx @alaskafx

Не .do Frontend

CSS

Как сделать такой же блок?

Привет всем.
Есть задачка, сделать примерно такой же блок, а если точнее - то это такую стрелочку:

которая сверху.

Вопрос задан более трёх лет назад
80 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

2 комментария

alaskafx @alaskafx Автор вопроса

Тогда, как сделать полный такой блок, как на второй картинке?

Написано более трёх лет назад

Олег @lolzqq

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title></title>

</head>

<body>
  <style type="text/css">
  body{display:block;padding:0px;margin:0px;position:relative;width:100%;min-height:100%;}
.main-frame-overlay{
  position:relative;
  width:30vw;
  height:20vh;
  background: gray;
  margin:20vh auto;
}
.main-frame-overlay::before {
	content: attr(data-content);
	background: black;
	width: 100%;
	position: absolute;
	width: 20%;
	height: -10%;
	top: -9%;
	left: 0px;
	color: white;
	text-align: center;
	margin-left: 60%;
}
.main-frame{
	position:relative;
}
.triangle{
	position:absolute;
	width: 0px; 
	height: 0px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 20px solid #24375B;
	margin-left:68.5%;
}
</style>
<div class="main-frame-overlay" data-content="1234">
<div class="triangle"></div>
  <div class="main-frame">
    ваш текст
  </div>
</div>
</body>
</html>

Чёто такое, подвигайте элементы, добавьте нутрянку, как заблагорассудится.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 5 часов назад
- 41 просмотр
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- 14 часов назад
- 52 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- 16 часов назад
- 67 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- вчера
- 74 просмотра
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- вчера
- 59 просмотров
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- вчера
- 31 просмотр
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 03 мая
- 85 просмотров
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- 03 мая
- 477 просмотров
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- 02 мая
- 191 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 02 мая
- 72 просмотра
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Разработать скрипт на терафлрме для деплоймеета

06 мая 2024, в 01:10

30000 руб./за проект

Правки в Laravel админку с тг ботами

05 мая 2024, в 23:43

8000 руб./за проект

Прикрутить новую верстку

05 мая 2024, в 23:39

3000 руб./за проект

Answer 1 · 2021-03-20 20:47:12

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Например, так

Альтернативы:
SVG
filter drop-shadow
text-shadow для символа ▲
и еще что-нибудь, что я забыла

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2021-03-20 19:29:13

Олег @lolzqq

HTML,CSS,JS,PHP

https://html5book.ru/css-figury/

.d3 {
width: 0; 
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;
}

Ответ написан более трёх лет назад

2 комментария

Как сделать такой же блок?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт