CSSを使用して角度の付いた形状を作成する

Question

CSSの枠線を使用してこのような形状を作成できますか？

私はいくつかの境界線の変更を行うことに関するいくつかの他のスタックオーバーフローの記事を見ていないが、特にこのようなもの。誰かが私を正しい方向に向けることができますか？ https://css-tricks.com/examples/ShapesOfCSS/に基づいて

おかげ

Answer 1

あなたはCSS :beforeを使用してこの形状を作成することができますし、:afterセレクタ：

#back { 
 
    background: #fff; 
 
    border:1px solid #333; 
 
    display: inline-block; 
 
    height: 20px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 120px; 
 
    text-align: center; 
 
} 
 
#back:before { 
 
    border-bottom: 15px solid #fff; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -15px; 
 
    width: 0; 
 
    z-index:2; 
 
} 
 
#back:after { 
 
    border-bottom: 15px solid #333; 
 
    border-left: 60px solid transparent; 
 
    border-right: 60px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -16px; 
 
    width: 0 ; 
 
    z-index:1; 
 
}

<div id="back"><span>Back to Top</span></div>

Answer 2

：

#base { 
 
    background: red; 
 
    display: inline-block; 
 
    height: 30px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
#base:before { 
 
    border-bottom: 15px solid red; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -15px; 
 
    width: 0; 
 
}

<div id="base"><span>BACK TO TOP</span></div>

ちょうどあなたのニーズに合わせて幅と高さを変更するには、それは本当に簡単です。

Answer 3

私は同じ矢印矢印と三角形のチュートリアルをCSSで書いてありました。ここで読むことができます：http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html。

トリックは、境界線とその色に基づいて動作します。矢印が指す方向。その側の境界線は0になり、残りの境界線は矢頭を作成します。

主な役割は反対側の境界です。矢印が上を指していなければならない場合、border-bottomは矢印を作成し、restは透明になり、矢印がbottomを指し示す必要がある場合、border-topは何らかの色であり、その他は透明になります。左と右を指す矢印も同様です。

透明色はIE8以下を除くすべてのブラウザで問題なく動作します。このため、一致する背景に色を設定して、表示されないようにすることができます。

Answer 4

フィドルhttp://jsfiddle.net/95Xq8/をカスタマイズすることによって、下記の出力

fiddle

をチェックしています

.arrow-wrap{ width:125px; margin:auto; padding:100px 0;} 
 
.arrow-button { 
 
    width: 125px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    position: relative; 
 
    background: #f00; 
 
    text-align: center; text-decoration:none; color:#000; display:block; 
 
    color:#fff; 
 
} 
 
.arrow-tip { 
 
    display: block; 
 
    width: 101px; 
 
    height: 115px; 
 
    margin: 0; 
 
    -webkit-transform: rotate(45deg) skew(-18deg,-23deg); 
 
} 
 
.arrow-tip-container { 
 
    display: block; 
 
    width: 125px; 
 
    height: 40px; 
 
    position: absolute; 
 
    top: -40px; 
 
    left: 0px; 
 
    overflow: hidden; 
 
} 
 
.arrow-tip-grad { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
}

<div class="arrow-wrap"> 
 
<a href="#" class="arrow-button">Back to top 
 
    <span class="arrow-tip-container"> 
 
     <span class="arrow-tip"> 
 
      <span class="arrow-tip-grad"></span> 
 
     </span> 
 
    </span> 
 
</a> 
 
</div>

Answer 5

完全に適応し、透明

...

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.border-arrow-top { 
 
    display: inline-block; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 6vh; 
 
    text-transform: uppercase; 
 
    padding: 0 10vw; 
 
    padding-bottom: 2vh; 
 
    border: 3px solid white; 
 
    border-top: none; 
 
    position: relative; 
 
} 
 
.border-arrow-top:before, 
 
.border-arrow-top:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0%; 
 
    border-top: 3px solid white; 
 
    width: 50%; 
 
} 
 
.border-arrow-top:before { 
 
    left: 0; 
 
    transform-origin: -3px -50%; 
 
    /* x-coord: -[size of border] */ 
 
    transform: skewy(-10deg); 
 
} 
 
.border-arrow-top:after { 
 
    right: 0; 
 
    transform-origin: calc(100% + 3px) -50%; 
 
    /* x-coord: 100% + size of border */ 
 
    transform: skewy(10deg); 
 
}

<div class="border-arrow-top"> 
 
    Back to Top 
 
</div>