Стрелка вниз указывающая CSS3 - PullRequest
Новая
       3

Стрелка вниз указывающая CSS3

0 голосов
/ 07 сентября 2018

Я пытаюсь создать подобный объект, используя CSS3:

enter image description here

В основном это стрелка, указывающая вниз (синяя часть). Пробовал несколько сервисов, таких как http://www.cssarrowplease.com/, но они не выдают совсем то, что нужно.

Любые подсказки, как такие стрелки могут быть сделаны? 

.arrow_box {
  position: relative;
  background: #88b7d5;
}

.arrow_box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #88b7d5;
  border-width: 30px;
  margin-left: -30px;
}
<div class="arrow_box"></div>

Ответы [ 3 ]

0 голосов
/ 07 сентября 2018

Вы можете использовать псевдокод. Пример ниже будет хорошо смотреться на небольших устройствах. Для более крупных устройств медиазапрос должен быть определен с использованием других настроек. 

body {
margin: 0;
}

.container {
  width: 100%;
  background-color: black;
  height: 200px;
  position:relative;
}

.container:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 600px solid transparent;
  border-right: 600px solid transparent;
  border-top: 160px solid darkblue;
  position: absolute;
  top: 0;
  left: -250px;
}
<div class="container"></div>
0 голосов
/ 07 сентября 2018

Используйте несколько фонов и градиентов, как это: 

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(blue,blue) top/100% 50px,
    linear-gradient(to bottom left,blue 49%,transparent 50%) 0 50px/50.1% 100px,
    linear-gradient(to bottom right,blue 49%,transparent 50%) 100% 50px/50.1% 100px,
    #000;
  background-repeat:no-repeat;
}

Вы также можете положиться на рамку, чтобы сделать фон менее сложным: 

.box {
  height:100vh;
  border-top:50px solid blue;
  background:
    linear-gradient(to bottom left,blue 49%,transparent 50%) top left,
    linear-gradient(to bottom right,blue 49%,transparent 50%) top right,
    #000;
  background-size:50.1% 40%;
  background-repeat:no-repeat;
  box-sizing:border-box;
}

body {
  margin:0;
}
<div class="box">

</div>
0 голосов
/ 07 сентября 2018

Вы можете установить background на один цвет и реализовать треугольник, который указывает вниз, например: 

#triangle-down {
	width: 0;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 125px solid blue;
  background: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

 <p id="triangle-down"></p>

</body>
</html>

Очевидно, что это базовый пример, который вы можете настроить для удовлетворения ваших конкретных потребностей. Для большего количества примеров я предлагаю посетить этот сайт. Я надеюсь, что это было полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...