CODEWITHSUNDEEP
htmlcss
Ben Van Looy
Ben Van Looy

Reputation: 55

How to create div with pseudo elements directly on top & under?

I'm trying to create a div with a triangle on top & a triangle under it..

Already experimented with borders only but they don't seem to give me that flexible width I want..

So where I'm at: I'm using pseudo elements to place svgs I made of the shape! Problem is, I'm not sure how to place them properly.. feels so strange to have to set 100% from top to place the bottom one & the other way (but as you can see there is a line in between etc)..

Here's the fiddle: https://jsfiddle.net/benvanlooy/c4vqb1ay/

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background-color: #D01417;
  margin-top: 200px;
   margin-bottom: 200px;
  padding: 30px;
}

.box::before {
  content: url('http://www.benvanlooy.be/fiddle/box-triangle-top-red-new-01.svg');
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 100%;
}

.box::after {
  content: url('http://www.benvanlooy.be/fiddle/box-triangle-bottom-red-new-01.svg');
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  top: 100%;
}
<div class="box">
  this is some content
  <BR/> this
  <br/> box
  <br/> has
  <br/> a <br/> variable
  <br/> height
</div>

Has anyone got any experience with something like this? :-) The answer is probably easy, so I'm feeling rather stupid :/

Any help would be much appreciated!

Upvotes: 0

Views: 77

Answers (4)

helb
helb

Reputation: 3234

Another option would be to clip the actual div's shape, without using pseudo elements or SVGs. For example:

div {
background-color: #D01417;
  width: 40%;
  clip-path: polygon(0 3em,
                     50% 0,
                     100% 3em,
                     100% calc(100% - 3em),
                     50% 100%,
                     0 calc(100% - 3em)
                     );
  padding: 4em 1em;
}

html * {
  box-sizing: border-box;
}
<div>
this is some content<BR/>
this<br/>
box<br/>
has<br/>
a <br/>
variable<br/>
height
</div>

Browser support for clip-path: https://caniuse.com/#feat=css-clip-path (works in most current browsers except Edge, if you add a -webkit- prefix)

The polygon is drawn by simply defining it's points:

enter image description here

translates to CSS shape as:

0 3em,
50% 0,
100% 3em,
100% calc(100% - 3em),
50% 100%,
0 calc(100% - 3em)

(starting at top left, but it doesn't really matter)

If you ever decide to go for more complex shapes, this tool is quite useful: https://bennettfeely.com/clippy/

Upvotes: 0

eye-wonder
eye-wonder

Reputation: 1193

You can remove a 4 px line by using calc like this:

.box::before {
  bottom: calc(100% - 4px);
}

https://jsfiddle.net/c4vqb1ay/33/

or

https://jsfiddle.net/c4vqb1ay/36/

Upvotes: 0

connexo
connexo

Reputation: 56773

This creates visual triangles without any images (using borders only):

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background-color: #D01417;
  margin-top: 200px;
  margin-bottom: 200px;
  padding: 30px;
}

.box::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  border-width: 22px;
  border-color: transparent transparent #D01417 transparent;
  border-style: solid;
}

.box::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  border-width: 22px;
  border-color: #D01417 transparent transparent transparent;
  border-style: solid;
}
<div class="box">
  this is some content
  <BR/> this
  <br/> box
  <br/> has
  <br/> a <br/> variable
  <br/> height
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273458

You can use gradient and no need for complex code and extra SVG:

.box {
  position: relative;
  display: inline-block;
  width: 40%;
  background: 
    linear-gradient(to top right,#D01417 49.5%,transparent 50%) top right/50.2% 200px,
    linear-gradient(to top left,#D01417 49.5%,transparent 50%) top left/50.2% 200px,
    linear-gradient(to bottom right,#D01417 49.5%,transparent 50%) bottom right/50.2% 200px,
    linear-gradient(to bottom left,#D01417 49.5%,transparent 50%) bottom left/50.2% 200px,
    linear-gradient(#D01417,#D01417) center/100% calc(100% - 400px);  
  background-repeat:no-repeat;
  padding: 200px 30px;
}
<div class="box">
  this is some content
  <br> this
  <br> box
  <br> has
  <br> a <br> variable
  <br> height
</div>

Upvotes: 1

Related Questions