章节划分与使用权几分圆润箭头CSS边框

您好，我需要有这样的章节划分。问题是制作正确的箭头，但对我来说最重要的是使用边框，所以我可以很容易地操作它（例如，更改颜色，宽度等）有没有什么常用的解决方案？最好是用纯CSS来解决这个问题，但如果你知道其他解决方法，请提出建议。

2017-04-21 Aghasi Grigoryan

就我所知，CSS不支持这种形状。如果你想避免使用图像，也许看看SVG。 – kalsowerus

像这样的东西？

.menu-item::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: -11px; 
    background-color: red; 
    width: 20px; 
    height: 22px; 
    background-color: #cccccc; 
    z-index: 1; 
    transform: rotate(45deg) translateY(-50%); 
    transform-origin: top; 
    border-radius: 5px; 
    border-top: solid 2px rgb(236, 240, 241); 
    border-right: solid 2px rgb(236, 240, 241); 
}

https://jsfiddle.net/punb5k49/

你可以做一个矩形，并使其旋转45deg，并有边框半径有这样的效果。不完美的，但最好再没有什么

编辑*

，如果你不明白我的意思，看到这个形象，它与我的jsfiddle比较

来源

2017-04-21 08:06:50

您可以检查这里的解决方案通过使用border属性： -

<html> 
<head> 
<style> 
.bordr{ 
     height: 30px; 
    width: 30px; 
    background: transparent; 
    border-radius: 2px; 
    border-right: 1px solid red; 
    border-bottom: 1px solid red; 
    transform: rotate(-45deg); 
} 
</style> 
</head> 
<div class="bordr"> 
</div> 
</html>

https://jsfiddle.net/xakdeyea/

来源

2017-04-21 08:17:51 Rupal

章节划分与使用权几分圆润箭头CSS边框

回答

相关问题