使用css的向下箭頭的邊界

Question

我有一個像下面的要求。

我可以通過https://css-tricks.com/snippets/css/css-triangle/網站並生成三角形。我想知道如何將其附加到邊框並獲得所需的高度10px和寬度40px的尺寸。

Answer 1

你需要使position: relative;的削減nt div和position: absolute;您想要製作箭頭的小孩div。

製造箭頭的主要事情是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;屬性應用到它，以便您可以根據需要定位它。

所以，如果您有相關的類框格，這是你會做什麼：

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/