CODEWITHSUNDEEP
css
feychu
feychu

Reputation: 1364

Rectangle with triangular side in css

Considering the dark gray section is the element sitting below, how can the golden shape in the picture be drawn with css exclusively?

enter image description here

This is my code so far:

.Header--wrapper {
  position: relative;
  background-color: #42424C;
}

.Header--start-small {
  width: 25%;
  position: absolute;
  background-color: #BCB097;
  color: white;
  margin-top: -10px;
  margin-left: 15px;
  padding-bottom: 57px;
  display: inline-block;
}

<div className="Header--wrapper">
  <div className="Header--start-small"></div>
</div>

Upvotes: 2

Views: 3900

Answers (2)

sideroxylon
sideroxylon

Reputation: 4416

#container {
  height: 80px;
  width: 300px;
  background: #ebebeb;
}

#container:before {
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 40px 20px;
  border-color: #ebebeb #ebebeb #ebebeb white;
}
<div id="container"></div>

Note that you can adjust the depth of the cut out by changing the last value in the border-width relative to the other values

Upvotes: 3

Sunil Boricha
Sunil Boricha

Reputation: 456

Please refer blow code, I have update css and html.

.Header--wrapper {
    position: relative;
    background-color: #BCB097;
    height: 40px;
    overflow: hidden;
}

.Header--start-small {
width: 25%;
position: absolute;
background-color: #42424C;
color: white;
margin-top: -10px;
margin-left: 0px;
padding-bottom: 57px;
display: inline-block
}
.Arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #42424c;
display: inline-block;
left: 25%;
position: absolute;
}
<div class="Header--wrapper">
  <div class="Header--start-small"></div><div class="Arrow"></div>
</div>

Upvotes: 3

Related Questions