css - css ボーダーシェイプの作り方

Question

次のコードを使用して 1 つのボックスを作成しました。

width:153px;
height: 39px;
border: 1px solid #cfcfcf;

そしてそれは無地の箱です。しかし、次のような形にしたい：

--/\---

このようにするには、どのCSSコードを作成する必要がありますか? 多くの境界コードを試しましたが、うまくいきませんでした。

Answer 1

結局のところ、はい、できます。css を使用してポリゴンを作成することは、まだコツをつかめないことの 1 つであるため、正直に説明することはできません。三角形が上向きになるように、境界線の方向を入れ替えるのに約 6 回の試行が必要でした。というわけでcssはこちら。

この記事には、必要なものがすべて含まれています。http://css-tricks.com/examples/ShapesOfCSS/#triangle-up

http://jsfiddle.net/9HRBb/

.box {
    width:153px;
    height: 39px;
    border: 1px solid #cfcfcf;
    margin-top:50px;
    position:relative;
}

.box:before {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-10px;
    left:50px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #cfcfcf;
}

.box:after {
    position:absolute;
    content:'';
    width:0;
    height:0;
    top:-8px;
    left:52px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:18px solid white;
}

Answer 2

次の構文を使用する必要があります。

.class:after 
{
 content: '';
position: absolute;
border-width: 10px;
border-style: none solid solid solid;
border-color: transparent transparent black;
right: 0px;
}