加长的六angular形button只使用一个元素

我想用CSS创build一个像这样的button，而不使用其他元素。

button图像

由于button有一个border ，我想我通常都需要:before和:after元素在一边创build一个箭头。 所以要在每一边制作一个箭头，我需要链接中的另一个span元素。

我试过的第二种方法是你在下面看到的。 但是采用这种解决scheme，它们没有正确居中，箭头的每一边的长度都不相同。

有人有一个解决scheme？

 /* 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> 

CodePen演示

Answer 1

这是另一种替代方法，只有一个元素完成这个。

这种方法如下所示：

1. 两个伪元素:before和:after主要.button元素的大小的一半（包括borders ）。 每个伪元素的高度是一边（顶部/底部）34px + 4px边框，另一边是2px。
2. 形状的上半部分是使用:before元素实现的:before而下半部分是使用:after元素实现的。
3. 使用带perspective的rotateX实现倾斜的效果和定位，将两个元素放置在一起，形成预期的形状。

 /* 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="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <a href="#" class="button ribbon-outset border">Click me!</a> 

Answer 2

这只是Harry答案的一个简单的select。

这种方法使用scale()和rotate(45deg)变换。 使用这种方法，您可以非常轻松地更改左右V形angular度。

小提琴

 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> 

Answer 3

我把你的笔分叉了

Codepen演示

主要的变化是，我从主button中删除了边框（因为他们是superflous

 /* 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 { top: 50%; content: " "; height: 43px; width: 43px; position: absolute; pointer-events: none; } .button.ribbon-outset.border:after { left:0; 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:-43px; 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); } 

Answer 4

我自己得到了答案。 这是元素之前和之后的变换属性的问题。

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); } 

更新了Codepen