CSS三角形不像方形一樣工作？

Question

我想知道有沒有辦法創建一個真正的三角形形狀的三角形？ 還是一種假裝它盡可能接近的方法？

每當你用svg之類的東西繪制一個三角形時，你總是會被一個鏡像的透明三角形所困，因為元素被繪制成方框。

我舉了一個例子，因為我發現很難解釋這個：

http://codepen.io/stephan-v/pen/gaxdjm

 svg { width: 100px; height: 100px; position: absolute; right: 0; top: 0; } svg polygon { fill: rgba(168, 210, 71, 0.6); cursor: pointer; } svg polygon:hover { fill: rgba(168, 210, 71, 0.9); cursor: pointer; } article { position: relative; width: 200px; height: 200px; background-color: whitesmoke; border: 1px solid lightgrey; } article a { display: block; width: 100%; height: 100%; } 

 <article> <a href="#"> </a> <svg> <polygon points="0,0 100,0 100,100" /> </svg> </article> 

我將整篇文章作為鏈接，並將svg三角形作為鏈接。 但是因為三角形被渲染為一個塊，所以有一小部分正是三角形的鏡像不可點擊的。

對於項目，我想刪除無法點擊的部分。 這是紅色部分：

Answer 1

CSS轉換

這可以通過創建元素並旋轉它以創建三角形效果來使用純CSS來完成。

我已經簡化了代碼，因此您可以清楚地了解正在發生的事情。

 div { width: 200px; height: 200px; background: lightgrey; position: relative; overflow: hidden; } div > a { width: 50%; height: 50%; position: absolute; left: 65%; top: 0; transform-origin: left top; transform: rotate(-45deg); background: blue; } 

 <div> <a href="#link"></a> </div> 

CSS剪輯路徑

另一種方法是使用剪輯路徑 。 它在一分鍾內得不到很好的支持，但似乎是CSS使用的下一個即將到來的功能。

 div { width: 200px; height: 200px; background: lightgrey; position: relative; overflow: hidden; } div > a { width: 50%; height: 50%; position: absolute; left: 65%; top: 0; -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%); clip-path: polygon(100% 0, 0 0, 100% 100%); background: blue; } 

 <div> <a href="#link"></a> </div> 

Answer 2

你的例子的快速修復就是使用pointer-event:none; 在svg元素上。 有關MDN上指針事件的更多信息。 有關瀏覽器支持，請參閱canIuse 。

 svg { width: 100px; height: 100px; position: absolute; right: 0; top: 0; pointer-events: none; } svg polygon { fill: rgba(168, 210, 71, 0.6); cursor: pointer; } svg polygon:hover { fill: rgba(168, 210, 71, 0.9); cursor: pointer; } article { position: relative; width: 200px; height: 200px; background-color: whitesmoke; border: 1px solid lightgrey; } article a { display: block; width: 100%; height: 100%; } 

 <article> <a href="#"></a> <svg> <polygon points="0,0 100,0 100,100" /> </svg> </article> 

---

另一種方法是將第二個鏈接放在一個容器中，並使用旋轉和overflow:hidden; 你可以獲得你想要的結果。 示例：

 div{ position:relative; width:200px; height:200px; overflow:hidden; } a {display:block} #l1{ width:100%; height:100%; background:grey; } span{ position:absolute; left:50%;top:0; width:50%; height:72%; transform-origin:0 0; transform:rotate(-45deg); overflow:hidden; } #l2{ width: 100%; height:70%; transform-origin:inherit; transform:rotate(45deg); background:gold; } 

 <div> <a id="l1" href="#link1"></a> <span> <a id="l2" href="#link2"></a> </span> </div> 

Answer 3

這是使用邊框操作的純CSS三角形的代碼片段：

#triangle{
    width: 0; 
    height: 0; 
    border-bottom: 25px solid transparent;
    border-right: 25px solid black;
}

這樣您就不必使用SVG添加它。

• 請注意，這種方式仍然可以作為正方形，但您可以設置z-index以將其置於您想要單擊的任何其他內容之后。

Answer 4

 #triangle { width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid #f00; } 

 <div id='triangle'></div> 

希望這會幫助你。