Div 以铅笔的形式

Question

如何创建铅笔形状的div，就像这样：

这似乎是一件基本的事情，但我从很久以前就开始尝试去做，但仍然做不到。

Answer 1

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 2

你可以这样做：

.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>

Answer 3

.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>

fiddle - https://jsfiddle.net/afelixj/L52bcL1n/

Div 以铅笔的形式

Div with the form of a pencil

html

css

css-shapes