How to append pseudo content properly

Question

I am hoping to create a box like this:

using the following CSS rules but I am getting this:

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -5px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.box::before {
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

How can I fix this?

possible duplicate of : https://stackoverflow.com/questions/47956092/html-css-triangle-with-pseudo-elements/47956145#47956145 — Temani Afif, Jun 23 '18 at 20:26
possible duplicate of : https://stackoverflow.com/questions/16237181/how-to-add-bordered-triangle-over-a-div-tag — Temani Afif, Jun 23 '18 at 20:26
possible duplicate of: https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color — Temani Afif, Jun 23 '18 at 20:28

score 3 · Accepted Answer · edited Jun 23 '18 at 20:30

What you want is to align both of your triangles (after,before) based on your .box.

For this box needs to have position:relative and your triangles position:absolute

Once you cave this, you can align the triangles based on your box position using:

top
left
bottom
right

For a better understanding, top:0 and left:0 will be the top left corner of your box.

Hope this helps :)

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -5px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: -2px;
  left: 16px;
}

.box::before {
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: -10px;
  left: 15px;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

score 2 · Answer 2 · answered Jun 23 '18 at 20:30

You are on the right track.

The main issue is that the before and after should get position absolute, while the parent container, AKA the .box container should have a relative or absolute position.

NOTE: After applying the position absolute to the before and after I just mad few minor tweaks to the before and after to set it up as the image that you have posted

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}

.box::after {
  position: absolute;
  content: "";
  border-color: #fff transparent;
  border-style: solid;
  border-width: 0 6px 6px;
  width: 1px;
  top: -5px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

.box::before {
  position: absolute;
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  top: -8px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

score 1 · Answer 3 · answered Jun 23 '18 at 20:32

I think below approach does the trick. You can adjust precise values. .container has :before pseudo element which is rotated square with borders. margin-bottom: -3px moves it, so it sticks to border-top, as rotate(45deg) messes it's position: absolute ; bottom: 100%.

.container {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 2px solid #56B665;
}

.container::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0) rotate(45deg);
  content: "";
  border-top: 2px solid #56B665;
  border-left: 2px solid #56B665;
  background: #FFFFFF;
  height: 8px;
  width: 8px;
  margin-bottom: -3px;
  display: block;
}

.box {
  text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

score 0 · Answer 4 · answered Jun 23 '18 at 20:34

Checkout below code: I also added another variation to achieve the same, which is more cleaner.

.box {
  width: 50px;
  color: #303030;
  position:relative;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -39px;
  width: 1px;
  margin-left: auto;
  margin-bottom: 35px;
  margin-right: auto;
  display: block;
  position: relative;
}

.box::before {
  content: "";
  top: -16px;
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}


.arrow_box {
 position: relative;
 background: #FFF;
 border: 4px solid #56B665;
  padding: 10px;
  text-align: center;
}
.arrow_box:after, .arrow_box:before {
 bottom: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.arrow_box:after {
 border-color: rgba(136, 183, 213, 0);
 border-bottom-color: #FFF;
 border-width: 30px;
 margin-left: -30px;
}
.arrow_box:before {
 border-color: rgba(194, 225, 245, 0);
 border-bottom-color: #56B665;
 border-width: 36px;
 margin-left: -36px;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>
<br />


<!-- Another Variation -->
<div class="container">
  <div class="arrow_box">100</div>
</div>

How to append pseudo content properly

4 Answers4