For those who can't wait Fiddle
I have this problem in CSS. The structure of the html
and css
code looks like this
HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
CSS:
.one{
width: 500px;
height: 500px;
background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}
.two{
width: 300px;
height: 300px;
background: blue;
padding: 20px;
}
.three{
width: 200px;
height: 200px;
background: transparent;
padding: 20px;
border: 5px solid yellow;
}
My problem is how do I make the background of <div class="three"></div>
that it would be transparent and would blend to the background of the <div class="one"></div>
. I want my desired output to be like the attached image. Is this possible ?
You can try like this: Demo
.three{
width: 200px;
height: 200px;
background: transparent;
padding: 20px;
border: 5px solid yellow;
outline:solid 100px rgba(0,0,255,.5);
}
update the border value as per your requirement.
Updated Demo
.three {
background: transparent;
border: solid blue;
margin: 10px 0px;
border-width:20px 40px 40px 20px;
}
.inner {
outline: 5px solid yellow;
width: 200px;
height: 60px;
margin:0;
padding: 20px;
}
I have added :before
and :after
also for blue background in right and bottom, so that more content can be added in the second div
.
Here is the fiddle - http://jsfiddle.net/afelixj/ouy9thkk/15/
As per your updated fiddle: https://jsfiddle.net/ouy9thkk/14/
I have used box shadow to achieve the expected result.
HTML
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
</div>
CSS
.one{
width: 800px;
height:800px;
background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}
.two{
width: 300px;
height: 300px;
padding: 20px;
}
.three{
width: 200px;
height: 80px;
background: transparent;
padding: 20px;
margin-bottom:30px;
border: 5px solid yellow;
box-shadow: 10px 0px 0 30px blue
}
Try this Fiddle
.one{
width: 500px;
height: 500px;
background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}
.blue{
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
border-width: 20px 115px 65px 20px;
}
.yellow{
width: 95%;
height: 95%;
border: 5px solid yellow;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
Closest I could get with this particular case:
.two{
width: 250px;
height: 250px;
background: trasparent;
padding: 0px;
border-top: 20px solid blue;
border-right: 60px solid blue;
border-bottom: 60px solid blue;
border-left: 20px solid blue;
}
try this example:(
jsfiddle.net/MxspA/6/
) please use rectangle image which should transparent from center like following example
jsfiddle.net/MxspA/6/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.