如何使用CSS编码箭头 [英] How to code an arrow using css

问题描述

大家好，我正在尝试在CSS中编写这样的箭头，我已经在Codepen上查看了示例，但现在我在考虑是否确实可行？

Hi guys I'm trying to code an arrow like this in css, I'e viewed examples on codepen, but now I'm thinking whether it is actually possible?

推荐答案

对于箭头和线条，我使用了 border

For arrow and lines i have use border

.content {
  margin-top: 30px;
  position: relative;
  border: 2px solid black;
  border-bottom: 2px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
}

.content:before,
.content:after,
.center:before {
  content: '';
  width: 0;
  height: 0;
  border-width: 8px 8px;
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
}

.content:before {
  left: -8px;
  top: 36px;
}

.content:after {
  right: -8px;
  top: 36px;
}

.center:before {
  right: -8px;
  top: 60px;
}

.center {
  position: absolute;
  height: 60px;
  top: -24px;
  left: 50%;
  margin-left:-2px;
  border: 1px solid black;
}

<div class="content">
  <div class="center">
  </div>
</div>

这篇关于如何使用CSS编码箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！