如何用CSS制作基本形状？

我试图用css制作基本形状，因为我需要将它添加到网站的主页。最终版本附在图像下方。请帮助我，我真的不知道如何实现这一目标如何用CSS制作基本形状？

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 55px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 
#base:before { 
 
    border-bottom: 35px solid #0a863d; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -35px; 
 
    width: 0; 
 
}

<div id="base"></div>

来源

2017-07-26 N. Jehnsen M

更改边框:after元素：

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 60px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 
#base:before { 
 
    border-left: 30px solid #0a863d; 
 
    border-top: 30px solid transparent; 
 
    border-bottom: 30px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    position: absolute; 
 
    width: 0; 
 
    right: -30px; 
 
}

<div id="base"></div>

来源

2017-07-26 06:16:48 fen1x

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 55px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 

 
#base:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 27.5px 0 27.5px 25px; 
 
    border-color: transparent transparent transparent #0a863d; 
 
    position: absolute; 
 
    right: -25px; 
 
}

<div id="base"></div>

来源

2017-07-26 06:17:27 Gerard

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 50px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 
#base:before { 
 
    border-bottom: 25px solid transparent; 
 
    border-left: 50px solid #0a863d; 
 
    border-top: 25px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    position: absolute; 
 
    left:100%; 
 
    width: 0; 
 
}

<div id="base"></div>

来源

2017-07-26 06:20:53 shaina

利用::before伪元素。

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 55px; 
 
    margin-left: 20px; 
 
    margin-top: 55px; 
 
    position: relative; 
 
    width: 100px; 
 
} 
 
#base:before { 
 
     border-bottom: 27px solid transparent; 
 
    border-left: 30px solid #0a863d; 
 
    border-right: 30px solid transparent; 
 
    border-top: 28px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    right: -60px; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0; 
 
    width: 0; 
 
    margin: auto; 
 
}

<div id="base"></div>

来源

2017-07-26 06:23:10

您可以通过改变margin和border性能旋转箭头：他们必须是 “旋转” 的权利（left变得top，top变得right等）：

#base { 
 
    background: #0a863d; 
 
    display: inline-block; 
 
    height: 66px; 
 
    margin-top: 20px; 
 
    margin-right: 55px; 
 
    position: relative; 
 
    width: 500px; 
 
} 
 
#base:before { 
 
    border-left: 35px solid #0a863d; 
 
    border-top: 33px solid transparent; 
 
    border-bottom: 33px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    right: -35px; 
 
    width: 0; 
 
}

<div id="base"></div>

的高度箭头可以通过调整#base的height和border-top和#base:beforeborder-bottom被改变。（注意的border-top和border-bottom总和应该是相同height。）
的宽度箭头可以通过调整width的#base

的改变

来源

2017-07-26 06:32:04 ScintillatingSpider

如何用CSS制作基本形状？

回答

相关问题