Geek Answers Handbook

CSS form before div

I have a problem adding the wrong shape to the div.

I need to get the effect, as in this image:

CSS shape before div

But I need to get this effect for the whole content div. Not just left or bottom. I tried to adapt the css arrow created using the frame, but that does not give me the right effect.

It is better to use borders with a combination of transparent color and ::before, ::afterpseudo-elements or background-clip.

My HTML structure

.wrapper::before {
  display: block;
  height: 0px;
  width: 0px;
  border-left: 5px solid transparent;
  border-right: 650px solid transparent;
  border-bottom: 50px solid black;
}
.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
}
<div class="wrapper">
  <div class="content">
    Content
  </div>
</div>
Run code

Is there a way to combine pseudo-elements ::afterand ::beforeto add this effect to the whole div?

+4
source share
3 answers

- , , border-image . , , .

.wrapper {
  padding: 50px;
  position: relative;
}
.content {
    background-color: #f2f2f2;
    box-sizing: border-box;
    color: #000;
    text-transform: uppercase;
    width: 300px;
    height: 200px;
    position: relative;
    z-index: 3;
    text-align: center;
    line-height: 200px;
}
.wrapper::before {
  content: '';
  display: block;
  background: rgb(145,205,239);
  width: 330px;
  height: 230px;
  position: absolute;
  z-index: 1;
  margin: -15px;
  transform: rotate(-1deg) skew(-5deg, -3deg);
}
<div class="wrapper">
    <div class="content">
CONTENT
    </div>
</div>
+5

, .

.content {
  background-color: #f2f2f2;
  box-sizing: border-box;
  color: #000;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  transform: skew(3deg, 5deg);
  -webkit-transform: skew(3deg, 5deg);
  -moz-transform: skew(3deg, 5deg);
  -o-transform: skew(3deg, 5deg);
  -ms-transform: skew(3deg, 5deg);
  position: relative;  
}
.wrapper {
  width: 400px;
  height: 222px;
  margin: 50px;
  padding: 25px 10px;
  background-color: blue;
  transform: skew(-3deg, -5deg);
  -webkit-transform: skew(-3deg, -5deg);
  -moz-transform: skew(-3deg, -5deg);
  -o-transform: skew(-3deg, -5deg);
  -ms-transform: skew(-3deg, -5deg);
  box-sizing: border-box;
}
.content-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <p class="content-text">Content</p>
      </div>
    </div>
  </body>
</html>
+3
  • <div class="wrapper"> not required for this task.
  • I have used transform: scale(1.1, 1.18) skew(-4deg,-1.5deg).

.content {
  background-color: #f2f2f2;
  color: #000;
  font-family:  Impact, "Trebuchet MS", sans-serif;
  text-transform: uppercase;

  float: left;
  margin: 40px;
  position: relative;

  width: 360px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.content::before {
  content: '';
  background: #91cdef;
  display: block;
  width: 360px;
  height: 180px;

  position: absolute;
  transform: scale(1.1, 1.18) skew(-4deg,-1.5deg);
  z-index: -1;
}

img {
  float: left;
  margin: 19px;
}  
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>

<img src="http://i.stack.imgur.com/9vJ92.png" alt="">
Run code
+1
source

More articles:


All Articles