CODEWITHSUNDEEP
htmlcsscss-shapes
Hadi
Hadi

Reputation: 17289

Transparent background with border-radius

I want to create arc transparent inside border radius with CSS\html. In fact I want corner div to be transparent and display bottom of page.

.corner{
    float:right;
    border-top-left-radius:60%;
    width:50px;
    height:48px;
    margin-top:2px;

    background:#fff;
    background:rgba(f,f,f,0.1);
}
.div{
    background-color: rgb(50,20,70);
    width:130px;
    height:50px;

}
.left{
    float:left;
    width:70px;
    height:48px;
    margin-top:2px;
    color:white;
}
 <div class="div">
                 <div class="left">345345</div>
                 <div class="corner"></div>
             </div>

Upvotes: 1

Views: 2346

Answers (1)

web-tiki
web-tiki

Reputation: 103790

You can use a box-shadow to keep a transparent background on .corner :

.corner {
  float: right;
  border-top-left-radius: 60%;
  width: 50px;
  height: 48px;
  margin-top: 2px;
  box-shadow:0 0 0 500px rgb(50, 20, 70);
}
.div {
  overflow:hidden;
  width: 130px;
  height: 50px;
}
.left {
  float: left;
  width: 70px;
  height: 48px;
  margin-top: 2px;
  color: white;
}

body{
  background:url('http://lorempixel.com/output/people-q-c-640-480-7.jpg');
  background-size:cover;
<div class="div">
  <div class="corner"></div>
  <div class="left">345345</div>  
</div>

Upvotes: 4

Related Questions