Skewed edges HTML/CSS

Question

I'm trying to create the following using HTML/CSS:

For the first concept I tried the following code:

.box1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  transform: skewX(-20deg) translateX(-40%);
  /* position: absolute; */
  z-index: 10;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css"/>

<div class="container">
  <div class="columns">
    <div class="column is-4 box1 has-text-centered">
      <img src="assets/graph.png" />
    </div>
    <div class="column is-6">

    </div>
  </div>
</div>

Which gives me the following result:

Is there any way to achieve the goal of a skewed div like the one in my first picture ?

what exactly is the problem you see with your result? It's not clear what your question is about. — Velimir Tchatchevsky, Sep 26 '19 at 18:36
https://stackoverflow.com/questions/24819252/how-to-draw-diagonal-lines-with-css/24819437 (note: the linked post is marked as duplicate... one pitfall stackoverflow has: people can mark posts as duplicates without linking to the post it is duplicated from...) — aequalsb, Sep 26 '19 at 18:49
check out css clip path property, it's perfectly suited for it. And using actual background images like that is a massive waste of data your users have to download - just never do it. If clip path is not sufficient try to use an absolute positioned SVG — MarcRo, Sep 26 '19 at 19:00
I think you have a bit of a misunderstanding regarding the effect you're seeing. The div in the above image is not skewed but rather shaped to have a side that is not at a right angle, or perhaps there's a pseudo element or other full element sitting on top. Or it's done via SVG. — TylerH, Sep 26 '19 at 19:03
@aequalsb Not sure what you mean, but questions closed as duplicates *always* show the question they're a duplicate of at the top of the page. — TylerH, Sep 26 '19 at 19:06

Christophermp · Answer 1 · 2019-09-26T18:58:43.687

The typical way I do this is by creating a container in CSS and then use a transparent image that I have positioned.

Freecodecamp have excellent tutorials about this. DEMO

.mask-skew {
 transform: skewX(-20deg);
 border-radius: 10px;
 width: 300px;
  height: 300px;
  overflow: hidden;
  
  margin: 40px auto;
  border: 2px solid orange;
}

.art-skew {
 transform: skewX(20deg);
 position: relative;
 left: -52px;
}

<body style="background: #999;">
  
 <div class="mask-skew">
  <img class="art-skew" src="http://lorempixel.com/450/300/sports/" alt="">
 </div>
  
</body>
</html>

Skewed edges HTML/CSS

1 Answers1