css - 自定义 CSS 边框样式（这个很棘手！）

Question

我想设计一个棘手的 CSS 边框。本质上，我想为 div 实现这种边框效果，其中 div 高度为 10px，带有 1px 纯绿色边框，但右边框有 4px 纯红色覆盖，垂直居中且只有 5px 高。

见下文：

有什么好主意吗？我玩过伪元素，但没有运气。我想要这个在一个 div 中。

谢谢

Answer 1

你可以用 CSS3 做到这一点。

div {
    width:10px;
    height:10px;
    border:1px solid green;
    position:relative;
}

div:after {
    content: '';
    background: red;
    width: 3px;
    height: 6px;
    position: absolute;
    right: -2px;
    top: 2px;
}

您只需要使用像素值来使其像您想要的那样（您的示例图像看起来并不像 10px x 10px）。

希望能帮助到你。

Answer 2

好吧，您可以在 Pseudo 之后或之前使用它

div:after{
content: '';
position: absolute;
border:5px solid green;
height: 50px;
left:198px;
top:60px;}

小提琴：http: //jsfiddle.net/zjUZB/1/

Answer 3

创建一个覆盖绿色 div 的 div。随意放置。给它这个CSS：pointer-events:none;

我怀疑这在单个 div 中是可能的。也许将图像作为右边框，但这意味着 div 大小的灵活性损失。

Answer 4

也许使用

.your-div:after { content: " "; 
border-left: 10px /*or whatever*/ solid red; 
position: relative;}

并根据需要设置边框、宽度、高度、位置等。

只是一个快速的想法，尚未测试:)

除此之外，我不知道（CSS 不支持多个边框）。

哦，我刚刚读到您已经使用过伪元素区域...所以您可能已经尝试过了。