CODEWITHSUNDEEP
css
Edinho Rodrigues
Edinho Rodrigues

Reputation: 366

Drawing a div with CSS

I need to make a div with this apeareance:
enter image description here

I tryed to do with this but when I put the background-color with rgba the CSS breaking in the intersection:

.first-box{
    position: absolute; 
    height: 50px; 
    background-color:rgba(245,0,0,.5); 
    width: 25%;
  }
  
.column{
    background-color:rgba(245,0,0,.5);
    height: 50px;
    width: 50px;
    transform: skew(30deg,0deg);
    border-radius: 0 10px 10px 0;
    position: relative;
    margin-left: 150px;
  }
<div class="img-text">
    <h4 class="title">
        Teste
    </h4>
    <div class="first-box">
        <h3>
            <small></small>
        </h3>
    </div>
    <div class="column">

    </div>
</div>

Upvotes: 1

Views: 137

Answers (4)

Temani Afif
Temani Afif

Reputation: 273427

simply do it with one element:

.first-box {
  position: absolute;
  z-index:0;
  height: 50px;
  width: 25%;
  overflow:hidden;
  padding-right:50px;
}

.first-box:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 0, 0, .5);
  transform: skew(30deg, 0deg);
  transform-origin: bottom;
  border-radius:0 10px 10px 0;
}
<div class="img-text">
  <h4 class="title">
    Teste
  </h4>
  <div class="first-box">
    <h3>
      <small></small>
    </h3>
  </div>

</div>

Upvotes: 2

Arpit Bhatia
Arpit Bhatia

Reputation: 173

Your code is correct, just need to make minimal changes in css.

Here is the code below.

.first-box{
    position: absolute; 
    height: 70px; 
    background-color:rgba(245,0,0); 
    width: 25%;
  }
  
.column{
    background-color:rgba(245,0,0);
    height: 70px;
    width: 70px;
    transform: skew(25deg,0deg);
    border-radius: 0 14px 18px 0;
    position: relative;
    margin-left: 140px;
  }
<div class="img-text">
    <div class="title">
        Test
    </div>
    <div class="first-box">
        <h3>
            <small></small>
        </h3>
    </div>
    <div class="column">

    </div>
</div>

Let me know if it helps you.

Upvotes: 0

Nave Sade
Nave Sade

Reputation: 441

Just remove the transparency (alpha channel) of background-color.

Upvotes: 1

Grzegorz T.
Grzegorz T.

Reputation: 4123

I hope this will be useful.

.drawing {
  position: relative;
  color: #000;
  width: 25%;
  line-height: 50px;
}

.drawing::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  left: 0;
  z-index: -1;
  background-color: #f50000;
  transform: skew(20deg);
  border-radius: 10px;
}

.drawing:before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 50px;
  width: 25px;
  left: -7px;
  background-color: #f50000;
}
<div class="drawing">Test</div>

Upvotes: 0

Related Questions