CSS Shapes , rectangle with curve rectangular edges

Question

need help creating the shapes above with the curved rectangular angles...to insert images inside i can do that ...can someone help me out ...please...

enter image description here

I have tried using border-radius to selectively chose the edge i want rectangular

.curv {
  width: 800px;
  margin: 0 auto;
  position: relative;
  padding-top: 100px;
  overflow: hidden;
}

.curv:before {
  background: #333;
  height: 200px;
  left: -20px;
  right: 0px;
  top: 0px;
  content: '';
  position: absolute;
  border-radius: 0% 0 0 0;
  clip-path: polygon(53% 0, 100% 49%, 57% 100%, 0% 100%, 0 47%, 0% 0%);
}

.holder {
  height: 200px;
  background: #333;
  position: relative;
  z-index: 9999;
}

<div class="curv">
  <div class="holder"></div>
</div>

Temani Afif · Accepted Answer · 2018-03-31 10:58:14Z

2

I would use some pseudo element and the same background-image twice.

Here is an example (missing only one curve):

body {
  background:pink;
}
.box {
  margin:100px;
  width:200px;
  height:100px;
  border-right:3px solid green;
  border-bottom:3px solid green;
  border-radius:0 0 10px 10px;
  background:
    url(https://lorempixel.com/200/150/) bottom;
  position:relative;
}
.box:before {
  content:attr(data-text);
  color:#000;
  font-weight:bold;
  text-shadow:0px 0px 5px #fff;
  text-align:center;
  position:absolute;
  height:50px;
  top:-53px;
  right:-3px;
  width:50%;
  background:
    url(https://lorempixel.com/200/150/) top right;
  border:3px solid green;
  border-bottom:none;
  border-radius:10px 10px 0 0;
}
.box:after {
  content:"";
  position:absolute;
  left:-3px;
  width:50%;
  bottom:-3px;
  height:100px;
  border:3px solid green;
  border-right:none;
  border-radius:10px 0 0 10px;
}

<div class="box" data-text="SOME TEXT">
</div>

edited Mar 31, 2018 at 10:58

answered Mar 31, 2018 at 9:13

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

che Over a year ago

Thank you so much Temani Afif, How do i put text on top? like in the sample

Temani Afif Over a year ago

@che i updated my answer ;) simply use it within the content of the pseudo element

Collectives™ on Stack Overflow

CSS Shapes , rectangle with curve rectangular edges

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related