为了账号安全,请及时绑定邮箱和手机立即绑定

仅使用一个元素的细长六角形按钮

/ 猿问

仅使用一个元素的细长六角形按钮

幕布斯5086720 2019-10-12 10:52:40

我想仅使用CSS制作一个类似这样的按钮,而不使用其他元素。


按钮图片

http://img1.mukewang.com/5da1400c00018a8e06910244.jpg

由于按钮带有border附件,因此我认为通常都需要:before和:after元素,以便仅在一侧创建一个箭头。因此,要在每一侧制作一个箭头,我需要span在链接内添加另一个元素。


我尝试的第二种方法是您在下面看到的方法。但是,使用这种解决方案时,它们无法正确居中,并且箭头的每一边的长度都不同。


有解决方案吗?

/* General Button Style */


.button {

  display: block;

  position: relative;

  background: #fff;

  width: 300px;

  height: 80px;

  line-height: 80px;

  text-align: center;

  font-size: 20px;

  text-decoration: none;

  text-transform: uppercase;

  color: #e04e5e;

  margin: 40px auto;

  font-family: Helvetica, Arial, sans-serif;

  box-sizing: border-box;

}

/* Button Border Style */


.button.border {

  border: 4px solid #e04e5e;

}

.button.border:hover {

  background: #e04e5e;

  color: #fff;

}

/* Button Ribbon-Outset Border Style */


.button.ribbon-outset.border:after,

.button.ribbon-outset.border:before {

  top: 50%;

  content: " ";

  height: 43px;

  width: 43px;

  position: absolute;

  pointer-events: none;

  background: #fff;

}

.button.ribbon-outset.border:after {

  left: -3px;

  margin-top: -40px;

  transform-origin: 0 0;

  box-sizing: border-box;

  border-bottom: 4px solid #e04e5e;

  border-left: 4px solid #e04e5e;

  transform: rotate(57.5deg) skew(30deg);

}

.button.ribbon-outset.border:before {

  right: -46px;

  margin-top: -40px;

  transform-origin: 0 0;

  box-sizing: border-box;

  border-top: 4px solid #e04e5e;

  border-right: 4px solid #e04e5e;

  transform: rotate(57.5deg) skew(30deg);

}

.button.ribbon-outset.border:hover:after {

  background: #e04e5e

}

.button.ribbon-outset.border:hover:before {

  background: #e04e5e

}

<a href="#" class="button ribbon-outset border">Click me!</a>


查看完整描述

3 回答

?
慕码人2483693

这是仅使用一个元素即可完成此操作的另一种替代方法。

此方法如下所示:

  1. 两个伪元素:before:after其大小约为borders主要.button元素的一半(包括)。每个伪元素的高度在一侧(顶部/底部)为34px + 4px边框,在另一侧为2px。

  2. 形状的上半部分使用:before元素实现,而下半部分使用:after元素实现。

  3. 使用rotateXwith perspective来实现倾斜效果,并使用定位来放置两个元素,以便它们形成预期的形状。

/* General Button Style */


.button {

  position: relative;

  display: block;

  background: transparent;

  width: 300px;

  height: 80px;

  line-height: 80px;

  text-align: center;

  font-size: 20px;

  text-decoration: none;

  text-transform: uppercase;

  color: #e04e5e;

  margin: 40px auto;

  font-family: Helvetica, Arial, sans-serif;

  box-sizing: border-box;

}

.button:before,

.button:after {

  position: absolute;

  content: '';

  width: 300px;

  left: 0px;

  height: 34px;

  z-index: -1;

}


.button:before {

  transform: perspective(15px) rotateX(3deg);

}

.button:after {

  top: 40px;

  transform: perspective(15px) rotateX(-3deg);

}


/* Button Border Style */


.button.border:before,

.button.border:after {

  border: 4px solid #e04e5e;

}

.button.border:before {

  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */

}

.button.border:after {

  border-top: none; /* to prevent the border-line showing up in the middle of the shape */

}


/* Button hover styles */


.button.border:hover:before,

.button.border:hover:after {

  background: #e04e5e;

}

.button.border:hover {

  color: #fff;

}

<!-- Library included to avoid browser prefixes -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>


<a href="#" class="button ribbon-outset border">Click me!</a>

输出截图:

//img4.mukewang.com/5da14036000195e703560103.jpg

已在Chrome v24 +,Firefox v19 +,Opera v23 +,Safari v5.1.7,IE v10中进行了测试。


照原样,这将在IE 8和IE 9中很好地退化为带有边框的方形按钮。但是,由于取消了一个border(border-bottomfor :before和border-topfor :after),它将在中间留下一个白色区域(类似于删除线)。可以通过使用本演示中的条件注释添加几个IE <10特定样式来克服这一问题。


<!--[if IE]>

  <style>

    .button.border:after{

      top: 38px;

    }

    .button.border:hover:before, .button.border:hover:after {

      border-bottom: 4px solid #e04e5e;

    }

  </style>

<![endif]-->

IE 9和IE 8的输出屏幕截图:

//img3.mukewang.com/5da140320001fce203320101.jpg

查看完整回答
反对 回复 2019-10-12
?
哔哔one

这只是哈利回答的一个更简单的选择。

这种方法使用scale()rotate(45deg)转换。使用这种方法,您可以轻松地更改左右人字形的角度。

div {

    height: 70px;

    width: 200px;

    margin-left: 40px;

    border-top: 4px solid #E04E5E;

    border-bottom: 4px solid #E04E5E;

    position: relative;

    text-align: center;

    color: #E04E5E;

    line-height: 70px;

    font-size: 21px;

    font-family: sans-serif;

}

div:before, div:after {

    content:'';

    position: absolute;

    top: 13px;

    height: 40px;

    width: 40px;

    border: 4px solid #E04E5E;

    -webkit-transform: scale(0.8,1.25) rotate(45deg);

    -moz-transform: scale(0.8,1.25) rotate(45deg);

    -ms-transform: scale(0.8,1.25) rotate(45deg);

    transform: scale(0.8,1.25) rotate(45deg);

}

div:before {

    left: -22px;

    border-top: 0px solid transparent;

    border-right: 0px solid transparent;

}

div:after {

    right: -22px;

    border-bottom: 0px solid transparent;

    border-left: 0px solid transparent;

}

div:hover, div:hover:before, div:hover:after {

    background-color: #E04E5E;

    color: #EEE;

}

<div>HELLO!</div>

需要更宽的箭头吗?只需降低scale()变换的x值:小提琴(宽)


窄一点?增加scale()变换的x值:小提琴(缩小)


注意: IE 8及更低版本不支持CSS转换(带有-ms-前缀的9支持),因此您可以查看此站点以支持它们:IE转换转换器


查看完整回答
反对 回复 2019-10-12
?
慕仰0522570

我自己得到了答案。这是:before和:after元素的transform属性的问题。


CSS已更改:


/* Button Border Style */

.button.border {

    border-top:4px solid #e04e5e;

    border-bottom:4px solid #e04e5e;

}

/* Button Ribbon-Outset Border Style */

.button.ribbon-outset.border:after, .button.ribbon-outset.border:before {

    height: 42px;

    width: 42px;

}

.button.ribbon-outset.border:after {

    left:0;

    border-bottom:5px solid #e04e5e;

    border-left:5px solid #e04e5e;

    transform:rotate(45deg) skew(19deg,19deg);

}

.button.ribbon-outset.border:before {

    right:-42px;

    border-top:5px solid #e04e5e;

    border-right:5px solid #e04e5e;

    transform:rotate(45deg) skew(19deg,19deg);

}


查看完整回答
反对 回复 2019-10-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信