html - 带边框的透明三 Angular 形

Question

尝试创建一个带有彩色边框的透明三 Angular 形 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); 
}

将一个 div 放在另一个 div 之上会破坏透明度

Answer 1

您还可以使用渐变和/或变换:

• 左边:square + border-top/left + transform + gradient to draw the bottom border:
• 在中间:你的
• 右侧:border-bottom + 三 Angular 形顶部边框的渐变

both extra example can hold content比如字体icone/text/image 。

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>

注意底部旋转的正方形可以隐藏一半