股利用鉛筆

Question

如何創建用鉛筆的形式div的形式，就像這樣：

這似乎是一個基本的東西，但我嘗試這樣做，因爲一些時間之前，仍然無法做到這一點。

Answer 1

.pencil{ 
 
width: 200px; 
 
height: 40px; 
 
border: 1px solid #000; 
 
position: relative; 
 
} 
 
.pencil:before{ 
 
content: ''; 
 
display: block; 
 
margin: 10px 0; 
 
width: 100%; 
 
height: 10px; 
 
border: 6px solid #000; 
 
border-width: 6px 0; 
 
} 
 
.pencil:after{ 
 
content: ''; 
 
    display: block; 
 
    height: 10px; 
 
    border: 1px solid #000; 
 
    border-width: 1px 1px 0 0; 
 
    width: 40px; 
 
    height: 36px; 
 
    transform: rotate(28deg) skewX(-31deg); 
 
    position: absolute; 
 
    right: -21px; 
 
    top: 2px; 
 
} 
 
.pencil span{ 
 
display: block; 
 
width: 0; 
 
height: 0; 
 
border-top: 4px solid transparent; 
 
border-left: 8px solid #000; 
 
border-bottom: 4px solid transparent; 
 
position: absolute; 
 
    right: -36px; 
 
    top: 15px; 
 
}

<div class="pencil"> 
 
<span></span> 
 
</div>

小提琴 - https://jsfiddle.net/afelixj/L52bcL1n/

Answer 2

css元素可以在網上找到一點點搜索。結合他們，你會得到你的鉛筆。

您可以找到更多here。

#rectangle { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
#rectangle:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: -100px; 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-left: 100px solid red; 
 
    border-bottom: 50px solid transparent; 
 
}

<div id="rectangle"></div>

Answer 3

你可以做這樣的事情：

.pencil-body { 
 
    border: 2px solid #000; 
 
    display: inline-block; 
 
    padding: 48px; 
 
    width: 100px; 
 
} 
 
.pencil-tip { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-left: 100px solid red; 
 
    border-bottom: 50px solid transparent; 
 
    display: inline-block; 
 
}

<div class="pencil-body"></div><div class="pencil-tip"></div>

如果您需要透明和像您已發佈什麼，在這裏它同是：

.pencil-tip { 
 
    position: relative; 
 
    background: #fff; 
 
    border: 2px solid #f00; 
 
    height: 55px; 
 
    width: 150px; 
 
} 
 
.pencil-tip:after, .pencil-tip:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.pencil-tip:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-left-color: #fff; 
 
    border-width: 30px; 
 
    margin-top: -30px; 
 
} 
 
.pencil-tip:before { 
 
    border-color: rgba(255, 0, 0, 0); 
 
    border-left-color: #f00; 
 
    border-width: 33px; 
 
    margin-top: -33px; 
 
}

<div class="pencil-tip"></div>