股利用铅笔

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>