带边框的透明三角

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>