Div with the form of a pencil

Question

How can i create a div with the form of a pencil, just like this:

Pencil Form

It seems a basic thing but im trying to do it since some time ago and still couldnt do it.

use `:before` or `:after` to create this. sure this question has been asked before - https://css-tricks.com/examples/ShapesOfCSS/ — Andrew, Jun 22 '15 at 08:43
Look at https://css-tricks.com/examples/ShapesOfCSS/ , you should find what you want — Simon M., Jun 22 '15 at 08:45

score 2 · Answer 1 · edited Jun 22 '15 at 12:05

2

The css elements are available online with a little search. Combine them and you get your pencil.

You can find more 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>

edited Jun 22 '15 at 12:05

Weafs.py

22,731
9
56
78

answered Jun 22 '15 at 08:49

Anna

101
8

This is **not an answer**. This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether. – Praveen Kumar Purushothaman Jun 22 '15 at 09:06
I cannot comment... I am a new user. – Anna Jun 22 '15 at 09:09
A Comment ≠ Answer. When you are not allowed to post a comment, please don't post comment as an answer, which is not accepted in StackOverflow. – Praveen Kumar Purushothaman Jun 22 '15 at 09:12
I just realized that my fiddle with the answer is void... I obviously meant to include it. – Anna Jun 22 '15 at 09:29

score 1 · Accepted Answer · answered Jun 22 '15 at 09:08

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

Praveen Kumar Purushothaman · Answer 3 · 2015-06-22T09:05:41.590

You can do something like this:

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

If you need the same with transparent and something like what you have posted, here it is:

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

Div with the form of a pencil

3 Answers3