Question

是否可以使用CSS边框创建这样的形状？

我看到了一些关于进行边框修改的其他堆栈溢出帖子，但没有特别喜欢这个。有人能指出我正确的方向吗？

由于

Answer 1

基于https://css-tricks.com/examples/ShapesOfCSS/：

#base {
  background: red;
  display: inline-block;
  height: 30px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 200px;
  text-align: center;
}
#base:before {
  border-bottom: 15px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -15px;
  width: 0;
}

<div id="base"><span>BACK TO TOP</span></div>

只需根据需要修改宽度和高度，这非常简单。

Answer 2

您可以使用css :before和:after选择器创建此形状：

＆＃13;

#back {
  background: #fff;
  border:1px solid #333;
  display: inline-block;
  height: 20px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 120px;
  text-align: center;
}
#back:before {
  border-bottom: 15px solid #fff;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -15px;
  width: 0;
  z-index:2;
}
#back:after {
  border-bottom: 15px solid #333;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -16px;
  width: 0 ;
  z-index:1;
}

＆＃13;

<div id="back"><span>Back to Top</span></div>

＆＃13;

Answer 3

完全适应性和透明......

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600');
  background-repeat: no-repeat;
  background-size: cover;
}
.border-arrow-top {
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-size: 6vh;
  text-transform: uppercase;
  padding: 0 10vw;
  padding-bottom: 2vh;
  border: 3px solid white;
  border-top: none;
  position: relative;
}
.border-arrow-top:before,
.border-arrow-top:after {
  content: '';
  position: absolute;
  top: 0%;
  border-top: 3px solid white;
  width: 50%;
}
.border-arrow-top:before {
  left: 0;
  transform-origin: -3px -50%;
  /* x-coord: -[size of border] */
  transform: skewy(-10deg);
}
.border-arrow-top:after {
  right: 0;
  transform-origin: calc(100% + 3px) -50%;
  /* x-coord: 100% + size of border */
  transform: skewy(10deg);
}

＆＃13;

<div class="border-arrow-top">
  Back to Top
</div>

＆＃13;

Answer 4

我已经用CSS编写了相同的箭头和三角形教程，可以在这里阅读：http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html。

这个诀窍是基于边界和它们的颜色。箭头必须指向的方向;那边的边界可以是0，其余边都会形成箭头。

主要作用是相反的边界;如果箭头必须指向顶部，则border-bottom将创建箭头，其余部分可以是透明的，如果箭头必须指向底部，则border-top将具有某种颜色，而其他颜色将是透明的。箭头指向左右也类似。

透明色在IE8及以下版本的所有浏览器中都能正常使用;为此，您可以将颜色设置为匹配的背景，以使其不可见。

Answer 5

通过自定义小提琴http://jsfiddle.net/95Xq8/下面给出的是输出

检查fiddle

＆＃13;

.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
    width: 125px;
    height: 50px;
    line-height: 50px;
    position: relative;
    background: #f00;
    text-align: center; text-decoration:none; color:#000; display:block;
    color:#fff;
}
.arrow-tip {
    display: block;
    width: 101px;
    height: 115px;
    margin: 0;
    -webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
    display: block;
    width: 125px;
    height: 40px;
    position: absolute;
    top: -40px;
    left: 0px;
    overflow: hidden;
}
.arrow-tip-grad {
    display: block;
    width: 100%;
    height: 100%;
    background: red;
}

＆＃13;

<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
    <span class="arrow-tip-container">
        <span class="arrow-tip">
            <span class="arrow-tip-grad"></span>
        </span>
    </span>
</a>
</div>

＆＃13;

使用CSS创建倾斜的形状

5 个答案: