在 CSS3 中重新创建一个三角形的按钮形状答案

【问题标题】：Recreating a triangular-ended button shape in CSS3在 CSS3 中重新创建一个三角形的按钮形状
【发布时间】：2013-08-30 06:36:28
【问题描述】：

我正在尝试在 CSS3 中重新创建这个形状。

这是我的解决方案：

<span><div id="shape"></div></span>

span {
  display: block;
  margin-left: 88px;
}

#shape {
   width: 160px; 
   height: 100px; 
   background: #dcdcdc;
}

#shape:before {
   height: 76px;
   width: 76px;
   top: 20px;
   content:"";
   position: absolute; 
   border-radius: 10px;
   background-color: #ccc;
   left: 60px;
  -webkit-transform:rotate(45deg);

}

#shape:after {
   height: 76px;
   width: 76px;
   top: 20px;
   content:"";
   position: absolute; 
   border-radius: 10px;
   left: 220px;
   -webkit-transform:rotate(45deg);
   background-color: #ccc;
}

不幸的是，这无法缩放：CodePen demo（我更改了背景颜色以说明我的做法）。垂直缩放很重要。

JavaScript 解决方案也可以。

【问题讨论】：

你已经有了你想要的图像。为什么不能只使用它（在去掉灰色背景之后）？您可以为您的页面使用多种尺寸。
你想如何扩展它？？
遗憾的是jQuery不能直接设置伪元素的高度，或者你可以用jQuery来设置。如果你想添加其他 HTML 元素，使用 jQuery 很容易。
@TusharGupta 垂直扩展很重要
您是否考虑过为此使用 SVG 而不是尝试在纯 CSS 中实现它？创建它并将其正确缩放为 SVG 图像将非常容易。

标签： jquery html css css-shapes

【解决方案1】：

一种可能性是使用 3d 变换：

.diamond {
    left: 50px;
    top: 50px;
    position: absolute;
    height: 88px;
    width: 300px;
    background-color: transparent;
    -webkit-perspective: 100px;
    -moz-perspective: 100px;
    perspective: 100px;
}

.diamond:before {
    content: '';
    width: 100%;
    height: 51%;
    left: 0%;
    top: 0%;
    position: absolute;
    border-color: red;
    border-style: solid;
    border-width: 3px 3px 0px 3px;
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    transform: rotateX(20deg);
    border-radius: 6px;
    background-color: blue;
}

.diamond:after {
    content: '';
    width: 100%;
    height: 51%;
    left: 0%;
    bottom: 0%;
    position: absolute;
    border-color: red;
    border-style: solid;
    border-width: 0px 3px 3px 3px;
    -webkit-transform: rotateX(-20deg);
    -moz-transform: rotateX(-20deg);
    transform: rotateX(-20deg);
    border-radius: 6px;
    background-color: lightblue;
}

fiddle

【讨论】：

【解决方案2】：

演示http://jsfiddle.net/Le8Hw/2/

风格：

#kougiland{
    position:relative;
    width:110px;
    height:34px;
    margin:100px;
    color:white;
    text-align:center;
    font-size: 22px;
    vertical-align: middle;
    line-height: 30px;
    background-color:red;
    box-shadow: 0 4px 8px #ccc, 10px 5px 8px -4px #ccc, -9px 5px 8px -4px #CCC;
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%);
}

#kougiland:before,#kougiland:after{
    content:'';
    position:absolute;
    top: 4px;
    height: 26px;
    width: 26px; 
    background:red;
    border-radius:4px;
    -webkit-transform: rotateZ(45deg);
    background-color:red;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%);
}
#kougiland:before{
    left:-14px;
    box-shadow: 0px 7px 11px -4px #ccc;
}
#kougiland:after{
    right:-14px;
    box-shadow: 7px 0px 11px -4px #ccc;
}

标记：

<div id=kougiland>weiter</div>

随心所欲地改变颜色并玩得开心:-)

【讨论】：

这并不能解决OP的问题...它需要能够根据内容动态改变高度。
然后用于 speudo el width:100%;并用 jquery 设置高度
您不能使用 jquery/js 访问伪元素。它们是创建的元素，而不是 DOM 的一部分。
这个解决方案不是跨浏览器的。