CODEWITHSUNDEEP
css
Markxc9
Markxc9

Reputation: 23

how to create div with a smooth curved border

i'm trying to recreate this element

I've created the following structure:

.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }


.slider-background {     background: white;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 90%;
    height: 90%;
    text-align: right;
    z-index: 1; }
    
.slider-background a {
  padding: 15px 20px;
    display: block;
}

.slider-info {
  padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }
<div class="slider-container">

  <div class="slider-background">
    <a href="#">more<br>info</a>
  </div>
  <div class="slider-content">
    
    <div class="slider-info">
      <img src="https://via.placeholder.com/140x100"/>
      <h2>
        lorem<br><b>ipsum</b>
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
      </p>
    </div>
    
  </div>

</div>

But i'm not sure on how to recreate the curved angle on the top div, what would be the best solution to achieve that result?

Upvotes: 1

Views: 778

Answers (1)

Temani Afif
Temani Afif

Reputation: 272866

Here is an idea with pseudo element and skew transformation.

I kept only the relevant for so we can see the trick:

.slider-info {
  padding: 45px 30px;
}

.slider-content {
  background: 
    linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
  width: 300px;
  margin: 20px auto;
  border-radius:20px 0 20px 20px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.slider-content::after {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:200px;
  background:lightblue;
  transform-origin:bottom;
  transform:skew(30deg);
  border-radius:0 20px 0 0;
}
<div class="slider-content">

  <div class="slider-info">
    <img src="https://via.placeholder.com/140x100" />
    <h2>
      lorem<br><b>ipsum</b>
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
    </p>
  </div>

Upvotes: 2

Related Questions