дырка

прозрачная дырка

by Denni Adam

HTML

<div class="parent"> 
    <div class="circle"></div>
</div>

CSS

body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg) center;} 

.parent {background:red;border-radius:10px;width:400px;height:100px;position:relative;}
.circle{
    
    float:right;
    position:absolute;
    right:-50px;
    top:0;
    bottom:0;
    width:50px;
    overflow:hidden;
}
.circle:after{
    content:"35";
    width:20px;
    height:20px;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
    display:block;
    border:red 50px solid ;
    margin-left:-45px;
    margin-top:-20px;
    color:green;
    padding:10px;
}