用铅笔形式的 Div [重复]答案

【问题标题】：Div with the form of a pencil [duplicate]用铅笔形式的 Div [重复]
【发布时间】：2015-09-07 15:20:18
【问题描述】：

我怎样才能用铅笔的形式创建一个div，就像这样：

这似乎是一件基本的事情，但我从前一段时间就开始尝试这样做，但仍然无法做到。

【问题讨论】：

使用:before 或:after 来创建它。确定这个问题之前已经问过 - css-tricks.com/examples/ShapesOfCSS
看看css-tricks.com/examples/ShapesOfCSS，你应该找到你想要的
cssarrowplease.com

标签： html css css-shapes

【解决方案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;
}

&lt;div id="rectangle"&gt;&lt;/div&gt;

【讨论】：

这不是答案。这是作为答案发布的，但它并不试图回答这个问题。它可能应该是编辑、评论、另一个问题或完全删除。
我无法评论...我是新用户。
评论≠回答。当您不允许发表评论时，请不要发表评论作为答案，这在 StackOverflow 中是不接受的。
我刚刚意识到我的答案是无效的......我显然是想包括它。

【解决方案2】：

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

【讨论】：

【解决方案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;
}

&lt;div class="pencil-body"&gt;&lt;/div&gt;&lt;div class="pencil-tip"&gt;&lt;/div&gt;

如果你需要透明的和你发布的类似的东西，这里是：

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

&lt;div class="pencil-tip"&gt;&lt;/div&gt;

【讨论】：