Jquery 在CSS3中重新创建三角形结束按钮形状

我试图在CSS3中重新创建此形状

这就是我的解决方案：

span{
显示：块；
左边距：88px；
}
#形状{
宽度：160px；
高度：100px；
背景：#DCDC；
}
#形状：以前{
高度：76px；
宽度：76px；
顶部：20px；
内容：“；
位置：绝对位置；
边界半径：10px；
背景色：#ccc；
左：60px；
-webkit变换：旋转（45度）；
}
#形状：后{
高度：76px；
宽度：76px；
顶部：20px；
内容：“；
位置：绝对位置；
边界半径：10px；
左：220px；
-webkit变换：旋转（45度）；
背景色：#ccc；
}

不幸的是，这不符合比例：（我改变了背景颜色来说明我的做法）。它必须垂直缩放

JavaScript解决方案也可以使用。

演示

风格：

#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>

weiter

---

只需根据您的喜好更改颜色，并享受其中的乐趣：-）

一种可能是使用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;
}

---

您已经有了您想要的图像。为什么你不能直接使用它（在去掉灰色背景之后）？您可以为页面使用多种大小。您希望如何缩放它？很遗憾，jQuery不能直接设置伪元素的高度，或者您可以使用jQuery设置它。如果您想添加其他HTML元素，使用jQuery很容易。@tuChargupta垂直扩展很重要您是否考虑过使用SVG来实现这一点，而不是试图在纯CSS中实现它？创建它并将其适当缩放为SVG图像非常容易。这并不能解决OP的问题。。。它需要能够根据内容动态更改高度。然后用于speudo el宽度：100%；并使用jqueryy设置高度您无法使用jquery/js访问伪元素。它们是创建的元素，不是DOM的一部分。此解决方案不是跨浏览器的。