我尝试使用内部透明颜色和彩色边框绘制箭头,但是我是这个世界的新手。 有人可以帮我做这样的事情: arrow down with text inside
我的代码:
.pentagon {
position: relative;
width: 350px;
top:20rem;
left: 20rem;
border-width: 80px 0 100px 0;
border-style: solid;
border-color: #01ff70 transparent;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
left: -7.5rem;
border-width: 100px 300px 300px;
border-style: solid;
border-color: transparent transparent #01ff70;
transform: rotate(180deg);
}
答案 0 :(得分:1)
我将使用多个渐变来构建它以创建每一行:
.arrow {
width:200px;
height:200px;
background:
linear-gradient(blue,blue) top center/ 100px 3px,
linear-gradient(blue,blue) calc(50% - 50px) 0/3px 50%,
linear-gradient(blue,blue) calc(50% + 50px) 0/3px 50%,
linear-gradient(blue,blue) 0 50%/51px 3px,
linear-gradient(blue,blue) 100% 50%/51px 3px,
linear-gradient(to bottom right,
transparent calc(50% - 2px),blue calc(50% - 2px),
calc(50% + 2px),transparent calc(50% + 2px)) 100% 100%/50% 50%,
linear-gradient(to bottom left,
transparent calc(50% - 2px),blue calc(50% - 2px),
calc(50% + 2px),transparent calc(50% + 2px)) 0 100%/50% 50%;
background-repeat:no-repeat;
text-align:center;
line-height:220px;
}
<div class="arrow">
text inside
</div>
并使用一些CSS变量来控制不同的值:
.arrow {
--c:blue; /*main color*/
--t:2px; /*thickness*/
--d: 100px; /*top length*/
--p:50%; /*percentage of top*/
--g:linear-gradient(var(--c),var(--c));
width:200px;
height:200px;
background:
/*1*/
var(--g) top center/ var(--d) var(--t),
/*2*/
var(--g) calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
var(--g) calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
/*3*/
var(--g) left 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
var(--g) right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
/*4*/
linear-gradient(to bottom right,
transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
linear-gradient(to bottom left,
transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p));
background-repeat:no-repeat;
display:inline-block;
text-align:center;
line-height:220px;
}
<div class="arrow">
text inside
</div>
<div class="arrow" style="--c:red;--t:5px;--d:40px;--p:40%">
text inside
</div>
<div class="arrow" style="--c:green;--t:3px;--d:70px;--p:60%">
text inside
</div>
top center
上的一条线,其宽度等于--d
,高度等于--t
--t
,高度等于--p
+厚度的一半,以使它们与底部正确链接。我们将第一行放在顶部0
处,然后从中间删除一半--d
,使其从顶部行的左侧开始。与右边另一行的逻辑相同。(100% - var(--d))/2
剩余宽度的一半,而高度等于--t
。它们的位置很容易找到。左侧的0
处的左侧,顶部的--p
处的左侧。正确的逻辑相同。100% - var(--p)
。在这里,我们使用着色方法仅对二向角部分进行着色,并使其余部分保持透明。 如果您想要更多,我们可以在箭头内添加颜色:
.arrow {
--c:blue; /*main color*/
--b:red; /*background color*/
--t:2px; /*thickness*/
--d: 100px; /*top length*/
--p:50%; /*percentage of top*/
--g:linear-gradient(var(--c),var(--c));
width:200px;
height:200px;
background:
/*1*/
var(--g) top center/ var(--d) var(--t),
/*2*/
var(--g) calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
var(--g) calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
/*3*/
var(--g) left 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
var(--g) right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
/*4*/
linear-gradient(to bottom right,
var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
linear-gradient(to bottom left,
var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p)),
/*5*/
linear-gradient(var(--b),var(--b)) center top/var(--d) var(--p);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
line-height:220px;
}
<div class="arrow">
text inside
</div>
<div class="arrow" style="--c:red;--b:yellow;--t:5px;--d:40px;--p:40%">
text inside
</div>
<div class="arrow" style="--c:green;--b:pink;--t:3px;--d:70px;--p:60%">
text inside
</div>
答案 1 :(得分:0)
您可以在div上使用css clip-path
。
.arrow {
-webkit-clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
https://bennettfeely.com/clippy/上有一个方便的工具