CODEWITHSUNDEEP
jquerycss
caiocafardo
caiocafardo

Reputation: 196

Border bevelled transparent only with css

There is a simple way to make a beveled edge with only CSS, but transparent. No need for a svg, png, etc?

enter image description here

See what I've done so far: https://jsfiddle.net/Cafardo/zn5oysqy/5/

.home_fundo{
   width: 300px;
   height: auto;
   background: url(http://www.simi.org.br/files/Janeiro%20-%202017/11096.jpg);
}
.home_banner_caixa {
  width: 200px;
  max-width: 400px;
  height: auto;
  position: relative;
  background-color: #c77316;
  padding: 20px;
  font-size: 12px;
  color: #ffffff;
}

.home_banner_caixa_chanfro {
  width: 70px;
  height: 70px;
  position: absolute;
  top: -10px;
  right: -10px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.home_banner_caixa_chanfro1 {
  width: 70px;
  height: 35px;
  display: block;
  background-color: #ffffff;
}

.home_banner_caixa_chanfro2 {
  width: 70px;
  height: 35px;
  display: block;
  background-color: #c77316;
}
<div class="home_fundo">
  <div class="home_banner_caixa">
    <div class="home_banner_caixa_chanfro">
      <div class="home_banner_caixa_chanfro1"></div>
      <div class="home_banner_caixa_chanfro2"></div>
    </div>
    <h1>
      Lorem ipsum
      <br> dolor sit amet, consectetur adipiscing elit. Duis vitae augue ut mi fermentum sodales. Sed euismod est mollis sem malesuada, vitae placerat est congue
    </h1>
  </div>
</div>

Notice that the white corner should be transparent, I thought there might be some kind of jquery mask to make the white div of the bevel transparent or something ... can you help me?

Upvotes: 1

Views: 104

Answers (2)

KevynTD
KevynTD

Reputation: 682

You can use the clip-path css to cut the edge:

clip-path: polygon(0 0, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 0 100%)

Here a same result code: 

.home_banner_caixa {
  width: 200px;
  max-width: 400px;
  height: auto;
  position: relative;
  background-color: #c77316;
  padding: 20px;
  font-size: 12px;
  color: #ffffff;

  /* cut the edge */
  clip-path: polygon(0 0, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 0 100%)
}
<div class="home_banner_caixa">
  <h1>
    Lorem ipsum
    <br> dolor sit amet, consectetur adipiscing elit. Duis vitae augue ut mi fermentum sodales. Sed euismod est mollis sem malesuada, vitae placerat est congue
  </h1>
</div>

You can also play with clip-path in this site: https://bennettfeely.com/clippy/

Upvotes: 0

Pato Salazar
Pato Salazar

Reputation: 1477

You can set the background colour with a gradient, indicating the angle and saying that the first part of the gradient to be transparent. Also, you can give a with to the transparent section. You can delete all the other divs you where using to create the effect.

Hope this helps

try this

.home_fundo{
   width: 300px;
   height: auto;
   background: url(http://www.simi.org.br/files/Janeiro%20-%202017/11096.jpg);
}
.home_banner_caixa {
  width: 200px;
  max-width: 400px;
  height: auto;
  position: relative;
  padding: 20px;
  font-size: 12px;
  color: #ffffff;

  background:
  linear-gradient(225deg, transparent 50px, #c77316 0) top right;
  background-repeat: no-repeat;
}
    <div class="home_fundo">
      <div class="home_banner_caixa">
        <h1>
          Lorem ipsum
          <br> dolor sit amet, consectetur adipiscing elit. Duis vitae augue ut mi fermentum sodales. Sed euismod est mollis sem malesuada, vitae placerat est congue
        </h1>
      </div>

Upvotes: 2

Related Questions