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

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>

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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 12 часов назад
- 85 просмотров
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 90 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 95 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 76 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 59 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- 20 нояб.
- 101 просмотр
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Обновить дизайн карты метро Москвы

24 нояб. 2024, в 13:04

500 руб./в час

Сделать сайт на Tilda

24 нояб. 2024, в 12:29

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

Сделать 5 видеобэкграундов для выступления детей

24 нояб. 2024, в 12:25

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

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 комментария

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

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

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

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