CSSを使用した下向き矢印の境界

Question

私は以下のような要件があります。

私はhttps://css-tricks.com/snippets/css/css-triangle/ウェブサイトを通過して三角形を生成することができます。私はそれを国境に取り付ける方法を知り、高さ10pxと幅40pxの望ましい寸法を得たいと思っています。

Answer 1

あなたはのpareを作る必要があります矢印を作成する子divのnt divとposition: absolute;をクリックします。

矢印を作る主なものはtransformプロパティです。

正常に動作しています。しかしここでは、矢印のサイズはあなたが望むだけの2倍です。

* {box-sizing: border-box;} 
 
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;} 
 
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 80px; z-index: 2; background-color: #fff;} 
 
.arrow .pin {width: calc(50% + 5px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;} 
 
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}

<div class="line"> 
 
\t <div class="arrow"> 
 
\t \t <div class="pin"> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t <div class="pin"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

そしてそれは、矢印の40px x 10pxサイズです。

* {box-sizing: border-box;} 
 
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;} 
 
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 10px; width: 40px; z-index: 2; background-color: #fff;} 
 
.arrow .pin {width: calc(50% + 3px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;} 
 
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}

<div class="line"> 
 
\t <div class="arrow"> 
 
\t \t <div class="pin"> 
 
\t \t \t 
 
\t \t </div> 
 
\t \t <div class="pin"> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 2

これはかなり簡単です。

手順1：矢印を追加するdivのプロパティをposition: relative;に指定します。

ステップ2：CSSの矢印を追加：<div class="arrow-down"></div>そして、position: absolute;プロパティを適用して、必要に応じて配置することができます。

あなたがクラスボックスでのdivを持っていたのであれば、これはあなたがどうなるのかです：

HTML：

<div class="box"> 

    <div class="arrow-down"></div> 
</div> 

CSS：

// Arrow at the bottom 

.box { 
    width: 200px; 
    height: 150px; 
    background-color:red; 
    margin: 50px auto; 

    position: relative; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 10px solid #f00; 

    position: absolute; 
    bottom: -10px; 
    left: 80px; 
} 

はここのためのフィドルです同じ：https://jsfiddle.net/t2ne282z/