如何用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製作基本形狀？

回答

相關問題