I've made a simple Fiddle to demonstrate my problem. http://jsfiddle.net/JTqww/
HTML:
<body>
<div class="button">
<a href="#">
<img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
<span class="desc">Description</span>
</a>
</div>
</body>
CSS:
.button {
float: left;
width: 100px;
}
.button a {
background:green;
float:left;
z-index:-1;
}
img {
display:inline-block;
}
.desc{
display:inline-block;
text-align:center;
width:200px;
background-color:blue;
color:white;
}
.button:after {
position: absolute;
top: 10%;
left: 10%;
content:"I destroy your anchor";
color:red;
position: absolute;
width: 50%;
height: 50%;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
As you can see, I've made a button with an overlaid glass reflection effect, on top of an image. I wanted the image and the description below to all be wrapped in an anchor tag (which they are but the :after content seems to block the anchor). If you move the mouse outside of the glossy white area, it will interact with the anchor but inside that area of white gloss it will not.
I've tried floating the anchor and changing the z-index but the content placed :after the button (the 'gloss') seems to stop the anchor from receiving mouse-overs and click events.
Anyone know how to fix this? Any help much appreciated.
I workaround with your code, so that it looks nice.
Here is the fiddle
To make the click work on the added description too, just give :after to a or span tag instead of the class .button.
Working Fiddle
As your :after content is not part of the anchor it won't be clickable so you cannot place it over the top of your anchor and then expect to be able to click your anchor
now if you changed .before:after to .desc:after your link will be clickable:
http://jsfiddle.net/JTqww/2/
you'll just have to mess with the styles to get it to line up again
Instead you can give direct div
<div class="button">
<a href="#">
<img src="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
<div class="overlay">I destroy your anchor</div>
<span class="desc">Description</span>
</a>
</div>
DEMO
As #Pete states, your generated content is not part of your anchor, so it won't act as such. The simplest fix is just to remove your div.button altogether, and apply that class directly to your a:
<a href="#" class="button">
<img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
<span class="desc">Description</span>
</a>
The generated content itself is part of the anchor and so is clickable. Your initial CSS needs some tidying up as well. The button class, whatever it's applied to, needs to have position: relative so that it creates a new positioning context. The overlay will then sit correctly - see this fork.
Related
Problem
Is there any way to make a Bootstrap 3.2 sign glyph to have a white background? It is being displayed on a coloured background. I've got an example on bootply but it has a white trim that is annoying.
CSS
.glyph-white-background {
background-color:#FFFFFF;
border-radius: 50%;
}
I had a play with the bootply and there may well be better ways of doing this but for now I sorted it by placing an inner span inside the glyphicon element and positioning it so that its border does not overlap the parents.
<div class="header">
<span class="glyphicon glyphicon-exclamation-sign glyph-background">
<span class="inner"></span>
</span>
</div>
The CSS positions the inner to provide the red background for the icon only.
.header {
background-color:#3AA3CB;
font-size: x-large;
}
.glyph-background {
position:relative;
border-radius:50%;
color:#fff;
z-index:2;
}
.inner {
position:absolute;
top:2px;
left:2px;
right:2px;
bottom:2px;
border-radius:50%;
background-color:red;
z-index:-1;
}
Bootply
I followed #Duroth 's advice and it works just fine.
HTML
<span class="not-available-icon"><i class="fa fa-exclamation"></i> </span>
CSS
.not-available-icon {
background-color: #9D5A5B;
display: inline-block;
height: 25px;
width: 25px;
color: white;
border-radius: 50%;
font-size: 16px;
padding-left: 10px;
}
JS Fiddle Here
You can use any color in :
.glyph-white-background {
background-color: red;//Say red
border-radius: 50%;
}
You should specify white color for class .glyph-red
.glyph-red {
color: white;
}
See the screenshot:
http://www.bootply.com/IRTWifeP2u
I consider this absolute overkill for what you're trying to accomplish, but at least it seems to work.
Using a gradient editor, I generated an image with a radial gradient that drops from 100% to 0% opacity at around 67% / 68%, making the image fully transparent just before it hits the edge of the icon.
The following CSS should work for just about every circle icon:
.glyph-white-background {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 67%, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(67%,rgba(255,255,255,1)), color-stop(68%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 67%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);
}
Ofcourse, do mind your cross-browser compatibility.
I have a png graphic that I'm using as a button and when the user hovers over the image, I would like to have a color gradient appear over just the button image. Everything I'm finding is working for background images.
My html looks like this:
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
And now I'm wondering what needs to go inside the css to accomplish the color change upon hover:
.btn:hover: {
??
}
Any suggestions would be appreciated.
You need to wrap your img with an inline or inline-block element and add a pseudo element to that wrap that only displays on hover
FIDDLE: http://jsfiddle.net/xz7xy8dg/
CSS:
.wrap {
position:relative;
display:inline-block;
}
.wrap::after {
position:absolute;
height: 100%;
width:100%;
top:0;
left:0;
background: -moz-linear-gradient(top, rgba(0,255,0,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,255,0,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#00ffffff',GradientType=0 );
display:none;
content: ' ';
}
.wrap:hover::after {
display:block;
}
HTML:
<div class="wrap">
<img id="connectionRight_img" class="btn" src="imgs/trailEnd_turnRight.png" alt="Right Arrow"/>
</div>
This works fine for me. Still recommend not to use image as background if possible. It will slowdown the performance.
<style>
button.mylink { border-width:0px; text-align:center; width : 60px; height : 20; display: inline-block; background-image : url(imgs/trailEnd_turnRight.png); text-decoration:none }
button.mylink:hover { background-image : url(imgs/trailEnd_turnRight_hover.png) }
</style>
<button class="mylink" href="#">abc</button>
I'm kind of new in html.. what is the html and css tags for my background to look like this?
If you don't want to introduce extra elements, you can do it like this:
CSS:
body {
background-color: grey;
}
body:before,
body:after {
content: "";
background-color: blue;
height: 30%;
position: absolute;
left: 0;
width: 100%;
}
body:before {
top: 0;
}
body:after {
bottom: 0;
}
The proof is in the fiddle: http://jsfiddle.net/TSZTu/1/
This solution introduces utilizes the before and after pseudo elements of the body element to generate the blue bars. Normally they are invisible, but the content property gives them content and makes them show. They are inline by themselves, but using CSS you can position them as you like.
Update:
I used absolute in the example above, but that will cause them to scroll along with your body. Also, they will be on top of any body content. You can fix that using position: fixed together with z-index: -1 as shown here:
http://jsfiddle.net/TSZTu/2/
Alternative solition per request (although, I would pick the one above)
As Vucko mentioned, you can use a gradient as well. Now, I'm not very good at building gradients, but fortunately, there are fine gradient generators online. They will give you a big chunk of code to add support for multiple browsers, and it might look something like this:
background: #2989d8; /* Old browsers */
background: -moz-linear-gradient(top, #2989d8 0%, #2989d8 30%, #333333 30%, #333333 65%, #2989d8 65%, #2989d8 65%, #2989d8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(30%,#2989d8), color-stop(30%,#333333), color-stop(65%,#333333), color-stop(65%,#2989d8), color-stop(65%,#2989d8), color-stop(100%,#2989d8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* IE10+ */
background: linear-gradient(to bottom, #2989d8 0%,#2989d8 30%,#333333 30%,#333333 65%,#2989d8 65%,#2989d8 65%,#2989d8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=0 ); /* IE6-9 */
Actually this is a bit of faking. As you can see, this is a gradient from blue to blue, followed by a gradient from grey to grey, followed by yet another one from blue to blue.
The effect is quite different, because the gradient fills the total area of the body. And despite the fact that one gradient starts exactly where the last one ends, you can still see a bit of a blurry line between blue and grey (in Chrome at least).
Anyway, this is the result: http://jsfiddle.net/TSZTu/3/
HTML:
<div class="blue">
</div>
<div class="grey">
</div>
<div class="blue">
</div>
CSS:
.blue{
background-color:blue;
}
.grey{
background-color:grey;
}
div.blue{
padding:40px;
}
div.grey{
padding:80px;
}
Demo:http://jsfiddle.net/8Zt7w/2/
<HTML>
<style>
Body{
Background-color:blue;
}
#grey
Margin: auto;
Background-color:grey;
Height:300px;
}
<body>
<div Id='grey'>
</div>
</body>
</HTML>
Something like this...?
Try this css work as above image using single div:
div {
height: 400px;
background: -moz-linear-gradient(top, #2853c5 0%, #2853c5 20%, #7e7e7e 20%, #7e7e7e 80%,#2853c5 80%,#2853c5 100%); /* FF3.6+ */
}
This question is ... not complete, or missing something... you need to provide more information.
On the HTML tag itself, you would use something like
<body bgcolor="#ff0000">
<body bgcolor="red">
For CSS you can use something like
<body style="background-color:#ff0000;">
<body style="background-color:red;">
Simply, i would suggest that you use google and start with some basic tutorials.. StackOverflow is not a tutorial source... Once this question is answered, we do not want the next question to be... How do i insert text... While people are here to help, you should learn a basic understanding of HTML/CSS
<html>
<head>
<title>Test</title>
<style>
.blueclass
{
background-color:Blue;
}
.grayclass
{
background-color:Gray;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr class="blueclass">
<td width="200px" height="200px">
</td>
</tr>
<tr class="grayclass">
<td height="200px">
</td>
</tr>
<tr class="blueclass">
<td height="100px">
</td>
</tr>
</table>
</body>
</html>
I have two divs with same background color. How can I set the width of background?
Expected result:
Here is HTML:
<div>
<span>100% width of background</span>
</div>
<div>
<span>75% width of background</span>
</div>
What I tried to do using CSS:
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-size: 75%;
}
jsFiddle, of course.
Is it posible to do this exept of setting width of a div?
You can use background gradients with hard stops. Here I'm using custom properties on each element to dynamically set the length value. The CSS rule uses a partial attribute selector to look for the custom property in the style attribute.
div {
background-color: #fc0;
margin: 2px;
}
div[style*="--bg-length"] {
background: linear-gradient(
to right,
#fc0 var(--bg-length), /* the end of the colored segment */
transparent var(--bg-length) /* the start of the transparent segment */
);
}
<div><span>100% width of background</span></div>
<div style="--bg-length: 300px"><span>60% width of background</span></div>
<div style="--bg-length: 85%"><span>85% width of background</span></div>
<div style="--bg-length: 70vw"><span>85% width of background</span></div>
You can't do it with a simple background-color, but you can do it with a CSS gradient.
background-color is always treated as a single plain colour for the entire element, but gradients are treated as images, and can be sized. You can also do other things with gradients, such as layering multiple gradients, which can't be done with a simple background-color.
I would use a 1px image as background something like background: url(1px.png) repeat-y; then you can set background-size:75%; as it's image now. Making life easier and less/simple code as well.
you can use gradient:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 69%, rgba(30,87,153,0) 70%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(69%,rgba(30,87,153,1)), color-stop(70%,rgba(30,87,153,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 69%,rgba(30,87,153,0) 70%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#001e5799',GradientType=1 );
CSS gradient generator
jsfiddle
You should change your CSS to :
div {
background-color: #fc0;
margin: 2px;
}
div:last-child {
background-image: -webkit-linear-gradient(left, #fc0, #fc0 75%, transparent 75%, transparent 100%)
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I am trying to cut a triangle out of a div and show the background as it is behind the div... I would not have thought this to be possible, but you SO pros continue to surprise me here so I thought it was worth a shot :-)
This is what I would like to achieve (sorry for the faint image):
Please do not answer this question with a 3 column solution or something similar, I am more than capable of achieving this that way... I simply want to know if there are any cool CSS tricks out there that can achieve this with as a few graphics, if not no graphics, as possible?
It is possible to fake it, with some fantasy and some little tricks:
Use border-radius to cut out a transparent corner of the div;
Use ::before (or ::after) pseudo element to create a big triangle of the same background-color of the div;
Use z-index to put the triangle over the background div but under the content of the div;
Use a transparent container with the same size of your div to contain it, and apply overflow: hidden to cut the exceeding parts of the triangle;
et voilà!
Demo: http://jsfiddle.net/e2Umv/
And no, I didn't know it was possible, I just love challenges and tricky questions :)
HTML
<div class="someText" >
this text is partially visible;<br/>
this text is partially visible;<br/>
this text is partially visible;<br/>
this text is partially visible;<br/>
this text is partially visible;<br/>
</div>
<div class="underneathContainer">
<div class="cutout">Hello cut out div</div>
</div>
CSS
.someText{
background: green;
position: absolute;
z-index: 0;
top: 0;
}
.underneathContainer{
margin: 20px;
width: 260px;
height: 260px;
background: rgba(0,0,0,0);
overflow: hidden;
}
.cutout{
width: 200px;
height: 200px;
background: silver;
padding: 30px;
position: relative;
z-index: 1;
border-top-left-radius:30%;
}
.cutout:before{
content: '';
position: absolute;
top: -44px;
left: -30px;
border-width: 60px 60px 60px 60px;
border-style: solid;
border-color: rgba(0,0,0,0) silver silver rgba(0,0,0,0);
z-index: -1;
}
You could seperate your triangle from the rectangle and go with something like this:
<div id="rectangle"><div id="mask"></div></div>
#rectangle{width:300px; height:120px; position:relative; margin-top:100px; background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
#rectangle:after{content:" "; position:absolute; width:0px; height:0px; top:0; left:100px;border:1px solid white; border-color:transparent white transparent white; border-width:0px 50px 50px 50px;}
#mask{position:absolute; left:0; width:100px; height:50px; background:white;}
#mask:after{position:absolute; content:" "; left:200px; width:100px; background:white; height:50px; }
Fiddle here.
The only thing I can think of that applies here would be the image mask. You'd probably have to lay an element on top of another to have content over the mask.
The support for image-masks is not ubiquitous (only webkit at present I believe) but that will probably change over time.