时间戳

首页 > 解决方案 > 向下箭头 CSS3

css - 向下箭头 CSS3

问题描述

我正在尝试使用 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>

标签： css

解决方案

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

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

推荐阅读