Question

你好，我需要有这种部门划分。问题在于制作右箭头，但对我来说最重要的是使用边框，因此我可以轻松地使用它（例如，更改颜色，宽度等）有什么共同的解决方案吗？最好使用纯css来解决这个问题，但如果您知道其他任何解决方法，请建议。

Answer 1

这样的东西？

.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/

你可以制作一个矩形并使其旋转45度并具有边界半径以产生这种效果。不是那么完美，但它比没有更好

编辑*

如果你不明白我的意思，请看这张图片并将其与我的jsfiddle进行比较

Answer 2

您可以使用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/

截面使用边框

2 个答案: