Question

如何为CSS border-style创建以下抽象图案。

 /\   /\  
/  \ /  \
---------
         |\
         | \
         | /
         |/
         |\
         | \
         | /
         |/
         |\
         | \
         | /
         |/

PS：我无法添加图片

Answer 1

如您在示例中所示，为了获得围绕单个元素的多个“三角形”，我认为您唯一的选择是border-image属性

<强> JSFiddle Demo

<强> CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:250px;
    height:300px;
    margin:25px;
    border-style: solid;
    border-width: 13px 14px 14px 12px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 13 14 14 12 round;
}

<强> NB。此属性要求您使用“基础”图像。

W3C

CanIUse.com

Border Image Generator

Answer 2

嗯，没有预定义的CSS规则，但你仍然可以这样做。

在此处，请参阅此fiddle

    <div class="wrapper">
<div class="arrow_box">
    <div>
<div class="arrow_box_2">
    <div>
<div class="arrow_box_3">
    <div>

CSS：

.wrapper{
    width:500px;
    height:500px;
    position:relative;
}
.arrow_box {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    height:100px;
    width:40px;
    top:50px;
    left:50px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}

.arrow_box_2 {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    border-left:none;
    height:100px;
    width:50px;
    top:-4px;
    left:30px;

}
.arrow_box_2:after, .arrow_box_2:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_2:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box_2:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}
.arrow_box_3 {
    position: absolute;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    border-left:none;
    height:100px;
    width:45px;
    top:-4px;
    left:45px;

}
.arrow_box_3:after, .arrow_box_3:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box_3:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 20px;
    margin-left: -20px;
}
.arrow_box_3:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 26px;
    margin-left: -26px;
}

您的问题已被低估，因为您似乎没有进行过研究。记住，GIYF。

这是一个工具，可以帮助您了解它是如何完成的 - http://cssarrowplease.com

css自定义边框样式（三角形或箭头）

2 个答案: