Question

我正在尝试使用CSS3创建这样的对象：

基本上这是一个向下的箭头（蓝色部分）。尝试了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>

Answer 1

您可以将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>

显然，这是一个基本示例，您可以对其进行调整以满足自己的特殊需求。有关更多示例，我建议访问this网站。我希望这可以帮到你。

Answer 2

您可以考虑使用伪代码。下面的示例在小型设备上看起来不错。对于较大的设备，需要使用不同的设置来定义media query。

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>

Answer 3

使用多个背景和渐变，如下所示：

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>

向下箭头CSS3

3 个答案: