帶邊框的透明三角

Question

試圖用彩色邊框創建透明三角div。

CSS

#down { 
display: block; 
position: fixed; 
left: 0; right: 0; 
width: 0; height: 0; 
margin: 0 auto; 
border-left: 55px solid transparent; 
border-right: 55px solid transparent; 
z-index: 20; 
bottom: 0; 
border-bottom: 55px solid rgba(250,250,250,0.75); 
} 

戴上頂另一個格遺址透明度

Answer 1

您也可以使用梯度和/或轉換：

• 左：廣場+邊框頂部/左+變換+梯度繪製底邊框：
• 在中間：你
• 右：底部邊框+梯度三角形頂部邊框

both extra example can hold content如字體icone /文本/圖像。

body { 
 
    background:tomato; 
 
} 
 

 
#rotate { 
 
    position:fixed; 
 
    border:solid turquoise; 
 
    border-bottom:none; 
 
    border-right:none; 
 
    bottom:7px; 
 
    left:calc(50% - 180px); 
 
    height:75px; 
 
    width:75px; 
 
    transform-origin: bottom left; 
 
    transform:rotate(45deg); 
 
    background:linear-gradient(to bottom right, transparent calc(50% - 3px), turquoise calc(50% - 3px), turquoise 50%, transparent 50%); 
 
} 
 

 
#bg-gradient { 
 
    position:fixed; 
 
    bottom:5px; 
 
    left: calc(50% + 70px) ; 
 
    border-bottom:solid turquoise; 
 
    background:linear-gradient(to bottom right, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px)),linear-gradient(to bottom left, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px)) right 
 
    ; 
 
    background-repeat:no-repeat; 
 
    background-size:50% 100%; 
 
    height:55px; 
 
    width:110px; 
 
    
 
} 
 

 
#down { 
 
display: block; 
 
position: fixed; 
 
left: 0; right: 0; 
 
width: 0; height: 0; 
 
margin: 0 auto; 
 
border-left: 55px solid transparent; 
 
border-right: 55px solid transparent; 
 
z-index: 20; 
 
bottom: 5px; 
 
border-bottom: 55px solid rgba(250,250,250,0.75); 
 
}

<div id="down"></div> 
 
<div id="rotate"></div> 
 
<div id="bg-gradient"></div>

注意，在底部旋轉的方形可以有一半被隱藏

Answer 2

這通常與邊境技巧做一個div的，那些是不是這個

你需要別人真的很有幫助技術。

舉例來說，看到這個CSS

body { 
    background: linear-gradient(90deg, lightblue, yellow) 
} 

.trapezoid { 
    left: 50px; 
    top: 50px; 
    position: absolute; 
    height: 100px; 
    width: 500px; 
    background-color: transparent; 
} 

.trapezoid:before { 
    content: ''; 
    width: 57%; 
    height: 100%; 
    left: -4%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 0px 3px 3px; 
    -webkit-transform: skewX(-20deg); 
} 

.trapezoid:after { 
    content: ''; 
    width: 59%; 
    height: 100%; 
    right: -4%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 3px 3px 0px; 
    -webkit-transform: skewX(20deg); 
} 

Answer 3

這是一個非常簡單的解決方案，但它使用CSS transform這是不支持IE低於9.0。

請記住，此三角形位於頁面的最底部，因此可以使用旋轉的正方形。

#down { 
 
    display: block; 
 
    position: fixed; 
 
    left: 0; right: 0; 
 
    bottom: -47px; 
 
    width: 80px; 
 
    height: 80px; 
 
    margin: 0 auto; 
 
    border: 0; 
 
    z-index: 20; 
 
    background-color: rgba(250,250,250,0.75); 
 
    -ms-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    border: 3px solid #ffaa33; 
 
} 
 

 
#down-inner { /* Must be rotated back */ 
 
    width: 100%; 
 
    height: 100%; 
 
    -ms-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
body { 
 
    background-color: #e7e7e7; 
 
    color: #444444; 
 
    font-family: Arial, sans-serif; 
 
}

<div id="down"> 
 
    <div id="down-inner">A rotated square</div> 
 
</div>