jquery - CSS3 で三角形のボタン形状を再作成する

Question

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 デモ(私が行った方法を説明するために背景色を変更しました)。垂直にスケーリングすることが重要です。

JavaScript ソリューションも機能します。

Answer 1

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

フィドル