我如何創建這個特定的形狀？

Question

在CSS3中創建這種特殊形狀/形狀組合的方法比我目前做的更容易或更好嗎？我已經嘗試了一些不同的東西。

向下的三角形應該坐在三條線的下方，但我似乎無法得到它。

我希望它看起來像這樣：

https://jsfiddle.net/s6bcjzjr/

.triangle-container { 
 
    top: 0; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 30px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 1

我切換了三角形容器邊框頂部和調整邊緣

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.triangle-container { 
 
    top: 0; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-top: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: -10.5px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin: 3px 0 0 0; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
    <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 2

.triangle-container { 
top: 0px; 
width: 30px; 
height: 1px; 
position: relative; 
border-top: 2px solid #e74c3c; 
margin-top: 3px; 
} 

.triangle { 
position: absolute; 
margin: auto; 
top: -12px; 
left: 0; 
right: 0; 
width: 21px; 
height: 21px; 
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
border-right: 2px solid #e74c3c; 
border-bottom: 2px solid #e74c3c; 
} 

.line { 
width: 30px; 
position: relative; 
border-bottom: 2px solid #e74c3c; 
margin-top: 3px; 
} 

Answer 3

.triangle-container { 
    top: -35px; 
    width: 30px; 
    height: 40px; 
    position: relative; 
    border-bottom: 2px solid #e74c3c; 
} 

https://jsfiddle.net/s6bcjzjr/6/

Answer 4

我已經更新了你的小提琴，現在你的造型看起來很完美。我所做的是border-bottom改爲triangle-container的border-top，並調整height和margin對準三角形完美
這裏是小提琴 - https://jsfiddle.net/s6bcjzjr/5/

Answer 5

答案是：

.triangle-container { 
    top: -36px; 
} 

---

見它在這裏：

.triangle-container { 
 
    top: -36px; 
 
    width: 30px; 
 
    height: 40px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.triangle { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 30px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 21px; 
 
    height: 21px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    border-right: 2px solid #e74c3c; 
 
    border-bottom: 2px solid #e74c3c; 
 
} 
 
.line { 
 
    width: 30px; 
 
    position: relative; 
 
    border-bottom: 2px solid #e74c3c; 
 
    margin-top: 3px; 
 
}

<a href="#" class="open"> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="triangle-container"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</a>

Answer 6

使用之前和之後（fiddle）甲一種元素方法：

<a href="#" class="open down-arrow"></a> 

.down-arrow { 
    display: inline-block; 
    position: relative; 
    width: 30px; 
    height: 14px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
} 

.down-arrow::before { 
    display: block; 
    position: absolute; 
    top: 3px; 
    right: 0; 
    left: 0; 
    height: 3px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    content: ''; 
} 

.down-arrow::after { 
    display: block; 
    position: relative; 
    top: 4px; 
    left: 0; 
    right: 0; 
    width: 21px; 
    height: 21px; 
    margin: 0 auto; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    border-right: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    content: ''; 
} 

Answer 7

使用SVG：

可以創建這個容易使用SVG。沒有什麼複雜的，你需要的只有三行元素和一個路徑元素。

• 所有這三個元件line具有兩個座標，其中（X1，Y1）表示的線和（X2，Y2）的起始點代表了線的終點。

• 的path元件採用的路徑（d），並將其值可以如下解釋：

  • M5,20 - 移動到這是5像素到容器和20像素到右的點。
  • L95,20 - 從前一點（5,20）到（95,20）畫一條線。
  • L50,45 - 畫一條從前一點（95,20）到（50,45）的直線。
  • z - 關閉路徑。也就是說，繪製一條連接點（50,45）和起點的連線。

svg { 
 
    height: 100px; 
 
    width: 50px; 
 
} 
 
line, 
 
path { 
 
    stroke: #e74c3c; 
 
    stroke-width: 2; 
 
} 
 
path { 
 
    fill: none; 
 
    stroke-linejoin: bevel; 
 
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <g id='graphic'> 
 
    <line x1='5' y1='5' x2='95' y2='5' /> 
 
    <line x1='5' y1='10' x2='95' y2='10' /> 
 
    <line x1='5' y1='15' x2='95' y2='15' /> 
 
    <path d='M5,20 L95,20 L50,45z' /> 
 
    </g> 
 
</svg>

---

使用CSS與單個元素：

您可以使用一個單一的元素也與CSS達到相同的形狀。以下是相同的示例代碼片段。以下是對形狀如何實現的解釋。

• 具有容器高度和寬度的父錨標記。
• :before僞元素相對於容器絕對定位，高度爲20px。這個元素的背景是一個線性漸變，它具有2px所需的顏色，並且對於其餘部分是透明的。默認情況下，漸變填充它的容器，所以這個單一的背景圖案產生三條線。
• :after元素再次相對於容器定位。然後旋轉該僞元素，使得其左邊界和底邊界產生三角形的成角度的部分。另一個線性漸變背景會產生三角形的頂部線條。
• 我已經使用畢達哥拉斯定理計算了假的:after的高度和寬度。如果容器不是正方形，那麼您必須手動計算值。

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
a:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 3px; 
 
    left: 0px; 
 
    height: 20px; 
 
    width: 100%; 
 
    background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px); 
 
    background-size: 100% 5px; 
 
} 
 
a:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: calc(50px/1.414); 
 
    width: calc(50px/1.414); 
 
    border-bottom: 2px solid #e74c3c; 
 
    border-left: 2px solid #e74c3c; 
 
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
 
    background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%); 
 
}

<a href='#'></a>