The progress indicator which is at the extreme left starts from outside the progress bar initially, it gets into correct position if i remove the right: -10%; but then the progress indicator does not move when I change the width in the inline css of the pro-bar.
How to fix this.
.progress_bar{
height: 15px;
background-color:grey;
border-radius:15px;
box-shadow:0 4px 7px -5px #000 inset;
}
.progress_bar:first-child{
margin: 50px 0;
}
.progress_bar .pro-bar{
position: relative;
height: 100%;
box-shadow: 0 1px 11px -4px #fff inset;
border-radius:15px;
animation: animate-positive 4s;
}
.progress_bar .pro-bar > span{
background: linear-gradient(to top, #3d4131 35%, #fff 233%);
color: #a5a5a4;
box-shadow: 1px 1px 3px #1d1a1f;
font-size: 14px;
font-weight: 700;
position: absolute;
top: -37px;
right: -10%;
padding: 4px 10px;
border-radius: 3px 3px 3px 0px;
}
.progress_bar .pro-bar > span:after{
content: "";
border-top: 6px solid #3d4131;
border-right: 6px solid transparent;
position: absolute;
bottom: -6px;
left:0;
}
.pro-bar {
background: linear-gradient(to right,#d98164 35%,#a9b487 68%);
}
<div class="row">
<div class="col-xs-9 progress-container">
<div class="col-md-6">
<div class="progress_bar">
<div class="pro-bar" style="width: 0%">
<span>0%</span>
</div>
</div>
</div>
</div>
</div>
I think I've figured it out, please try
left: 100%;
instead of the right: -10%;
Related
I'm having trouble putting height variant sizes according to the number of balloons in my div.
They are following a fixed height and are not changing size according to the text, I can't put the first balloon as a height smaller than the first balloon, I already tried for a negative margin that didn't work either.
//the html below is rendered by javascript
div#chat-panel-casca {
z-index: 9999;
position: fixed;
overflow: hidden;
margin: 0;
width: 500px;
opacity: 1;
border-radius: 0;
transition-delay: .6s;
transition: .7s;
top: 0;
right: 0;
}
div #chat-casca {
height: 100vh;
background-color: #F4F4F6;
position: fixed;
top: 50px;
right: 0;
width: 499px;
}
/*this stretch corresponds to a tail applied to the first balloon*/
div #chat-casca #tail {
width: 0;
height: 0;
border-width: 0 17.5px 19px 17.5px;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
filter: drop-shadow(-6px 2px 2px rgba(166, 166, 166, 0.24));
transform: rotate(48deg);
position: relative;
border-radius: 25px;
top: -32px;
right: 19px;
}
div #chat-casca .chat-box {
border-radius: 10px;
width: 323px;
background-color: white;
position: relative;
margin-top: 12px;
left: 45px;
box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-webkit-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-moz-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
}
/*This is my main css, it is the balloon composition*/
div #chat-casca .chat-box p {
padding-left: 20px;
padding-top: 10px;
position: relative;
}
div #chat-casca .chat-box .chat-time {
position: relative;
color: #4d4e53;
font-size: 9px;
font-stretch: condensed;
top: -25px;
padding-left: 293px;
}
<div id="chat-panel-casca">
<div id="chat-casca">
<div class="chat-box">
<p>Hy, i ame here</p>
<div id="tail"></div>
<small class="chat-time">9:6</small>
</div>
<div class="chat-box">
<p>Some text</p>
<p> Another text.</p>
<small class="chat-time">9:6</small>
</div>
</div>
</div>
My goal is to decrease the margin-botton of the first div of the example below and set the spacing of the following divs keeping the height proportion.
I have this result:
But I need this result
You can fix it just by changing your CSS.
Remove vertical margins from p inside .chat-box
Remove position:relative from .chat-time
Style #tail with absolute positioning
Add some padding-bottom to .chat-box
body {
background: #eee;
}
div#chat-panel-casca {
z-index: 9999;
position: fixed;
overflow: hidden;
margin: 0;
width: 500px;
opacity: 1;
border-radius: 0;
transition-delay: .6s;
transition: .7s;
top: 0;
right: 0;
}
div#chat-casca {
height: 100vh;
background-color: #F4F4F6;
position: fixed;
top: 50px;
left: 0;
width: 499px;
}
/*this stretch corresponds to a tail applied to the first balloon*/
div#chat-casca #tail {
width: 0;
height: 0;
border-width: 0 17.5px 19px 17.5px;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
filter: drop-shadow(-6px 2px 2px rgba(166, 166, 166, 0.24));
transform: rotate(48deg);
position: absolute;
border-radius: 25px;
top: 0;
left: -19px;
}
div#chat-casca .chat-box {
border-radius: 10px;
width: 323px;
background-color: white;
position: relative;
margin-top: 12px;
left: 45px;
box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.60);
-webkit-box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.60);
-moz-box-shadow: 0px 0px 5px 0px rgba(166,166,166,0.60);
padding-bottom: 10px;
}
/*This is my main css, it is the balloon composition*/
div#chat-casca .chat-box p {
padding-left: 20px;
padding-top: 10px;
position: relative;
margin: 0;
}
div#chat-casca .chat-box .chat-time {
color: #4d4e53;
font-size: 9px;
font-stretch: condensed;
padding-left: 293px;
}
<div id="chat-casca">
<div class="chat-box">
<p>Hy, i ame here</p>
<div id="tail"></div>
<small class="chat-time">9:6</small>
</div>
<div class="chat-box">
<p>Some text</p>
<p> Another text.</p>
<small class="chat-time">9:6</small>
</div>
</div>
now another solution works for me
div #chat-casca .chat-box {
border-radius: 10px;
width: 323px;
background-color: white;
position: relative;
display: flex; /*add this line*/
flex-flow: wrap; /*and this line*/
margin-top: 12px;
left: 45px;
box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-webkit-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-moz-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
}
thanks everbody for try help me
Your tail div is interfering with the chat box's height.
Rather than using an actual div for the tail, try adding a class to the existing chat-casca div when you need the tail.
<div class="chat-box tail">
then add the ::before selector so it doesn't interfere with the other elements. Position this absolute and the chat-box positioned relative, then you can position the tail relative to the chat box.
#chat-casca .tail::before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-top: 10px solid #fff;
border-bottom: 10px solid transparent;
left: -19px;
top: 0px;
filter: drop-shadow(-4px 2px 2px rgba(166, 166, 166, 0.24));
}
#chat-casca .chat-box {
border-radius: 0 10px 10px 10px;
width: 323px;
background-color: white;
position: relative;
margin-top: 0;
margin-left: 45px;
height: auto;
box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-webkit-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
-moz-box-shadow: 0px 0px 5px 0px rgba(166, 166, 166, 0.60);
}
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
I'm trying to recreate this print card that has a inverse border radius and a couple borders. I got the borders working on a rectangle using box shadow, and I am fudging the inverted corners with 100% border radius divs. I applied the shadow to the rounded corners though and it looks super off.
Is there any way to use circle svgs to clip the corners then use filter: drop-shadow? not sure that's possible. any better ideas?
html:
#greetings
.top.left
.top.right
.bottom.left
.bottom.right
css:
#greetings{
box-shadow: -6px 6px 0 #8E9090, 6px -6px 0 #8E9090, -6px -6px 0 #8E9090, 6px 6px 0 #8E9090, -9px 9px 0 #f88125, 9px -9px 0 #f88125,9px 9px 0 #f88125, -9px -9px 0 #f88125, -12px 12px 0 #8E9090, 12px -12px 0 #8E9090, 12px 12px 0 #8E9090, -12px -12px 0 #8E9090;;
div {
position: absolute;
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #f88125;
}
.top { top: -20px; }
.bottom { bottom: -20px; }
.left { left: -20px; }
.right { right: -20px; }
.top.right {
box-shadow: -6px 6px 0 #8E9090, -9px 9px 0 #f88125, -12px 12px 0 #8E9090;
}
Target:
Html corners:
Wonky shadow:
I couldn't pull this off with your box-shadow approach.
I achieved something similar with borders and relative positioning. Didn't have time to polish the code, and if you look closely it is not symmetrical. It is not finished, but I thought I'd collaborate with an alternative.
I'm sure you can play around with the circles div widths to make the card look more similar to the original.
html
<div class="label">
<div class="inner-border-two"></div>
<div class="inner-border"></div>
<div class="corner-0 corner"></div>
<div class="corner-0 inner corner"></div>
<div class="border border-top"></div>
<div class="corner-1 corner"></div>
<div class="corner-1 inner corner"></div>
<div class="border border-right"></div>
<div class="corner-2 corner"></div>
<div class="corner-2 inner corner"></div>
<div class="border border-bottom"></div>
<div class="corner-3 corner"></div>
<div class="corner-3 inner corner"></div>
<div class="border border-left"></div>
</div>
css
.label{
position: relative;
display: inline-block;
width: 660px;
height: 458px;
border: 30px solid #F88125;
padding: 0;
}
.label .inner-border-two{
height: 104%;
width: 103%;
border: 2px solid #8E9090;
position: absolute;
top: -8px;
left: -8px;
}
.label .inner-border{
height: 100%;
width: 100%;
border: 6px solid #8E9090;
position: absolute;
}
.label .corner {
width: 38px;
height: 38px;
position: absolute;
background-color: #F88125; //Orange
}
.label .corner-0{
left: 0;
top: 0;
border-bottom-right-radius: 100%;
border-bottom: 6px solid #8E9090;
border-right: 6px solid #8E9090;
}
.label .corner-0.inner{
left: -8px;
top: -8px;
border-bottom: 3px solid #8E9090;
border-right: 3px solid #8E9090;
}
.label .corner-1{
right: 0;
top: 0;
border-bottom-left-radius: 100%;
border-bottom: 6px solid #8E9090;
border-left: 6px solid #8E9090;
}
.label .corner-1.inner{
right: -10px;
top: -8px;
border-bottom: 3px solid #8E9090;
border-left: 3px solid #8E9090;
}
.label .corner-2{
right: 0;
bottom: 0;
border-top-left-radius: 100%;
border-top: 6px solid #8E9090;
border-left: 6px solid #8E9090;
}
.label .corner-2.inner{
right: -10px;
bottom: -8px;
border-top: 3px solid #8E9090;
border-left: 3px solid #8E9090;
}
.label .corner-3{
left: 0;
bottom: 0;
border-top-right-radius: 100%;
border-top: 6px solid #8E9090;
border-right: 6px solid #8E9090;
}
.label .corner-3.inner{
left: -8px;
bottom: -8px;
border-top: 3px solid #8E9090;
border-right: 3px solid #8E9090;
}
I have the following JSFiddle: http://jsfiddle.net/eotamvwy/
HTML:
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.<p/>
</div>
</div>
How can I modify the CSS so that it is responsive?
I have a div which has the following style:
width: 98%
padding: 0 1% 0 1%
I want to insert the infobox-container inside and stretch it 100% and resize based on the above div.
Use percentage units for responsiveness and for triangles you don't need extra elements, you could use :after and :before :pseudo-elements on .infobox h3.
Updated Fiddle
body {
width: 100%;
margin: 0;
}
.main-container {
width: 98%;
padding: 0 1% 0 1%;
text-align: center;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
}
.infobox {
width: 80%;
padding: 10px 5px 5px 5px;
margin: 10px;
position: relative;
z-index: 1;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top, #6a6a6a, #424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 22px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox h3:before,
.infobox h3:after {
content: '';
border-color: transparent #2083c2 transparent transparent;
border-style: solid;
border-width: 12px;
height: 0;
width: 0;
position: absolute;
left: -12px;
top: 100%;
transform: translateY(-50%);
z-index: -1;
/* displayed under infobox */
}
.infobox h3:after {
border-color: transparent transparent transparent #2083c2;
left: 100%;
margin-left: -12px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover,
.infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="main-container">
<div class="infobox-container">
<div class="infobox">
<h3><span>This is the Header</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
</div>
If you want this header ribbon to be responsive, you need to get away from using fixed-widths and instead combine width:100%; and max-width: 270px; (or whatever).
When you define the width attribute to be 270px, you are telling the browser you want this particular element to have both a minimum and maximum width of 270px. If you are thinking responsively, what you actually want is for your element to expand as much as possible (width:100%), but to max-out at 270px (max-width: 270px;).
Thats the responsive bit.
What you are actually after is something closer to this:
http://jsfiddle.net/TheIronDeveloper/eotamvwy/3/
* {
box-sizing: border-box;
}
.infobox-container {
position: relative;
display: block;
margin: 0;
padding: 0;
max-width: 500px;
width: 100%;
}
.infobox {
padding: 3em 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox-ribbon {
position: absolute;
top: 10px;
width: 100%;
color: #fff;
padding: 10px 5px;
margin: 0;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 45px;
z-index: 0; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<h3 class="infobox-ribbon">This is the Header</h3>
<div class="infobox">
<p>This is the content of the infobox.</p>
</div>
</div>
I did a few things here:
I applied * {box-sizing:border-box;}, which does a nicer job at making elements "mold" to the widths that I tell them to (regardless of margins), more details here
I took the h3 ribbon out of the infobox, and changed its position to absolute. My reasoning is that the h3-ribbon needs to conform to the info-box container's width, not the infobox itself. That way, regardless of the width, the ribbon will conform to its parent, and the infobox can occupy its 100% + margins (which should always be even on both sides.)
And like I mentioned before, I changed the fixed-width of the infobox-container to width:100%;max-width:500px;. If you try resizing down, the ribbon stays in place.
I think you can just make a couple of small changes to make all the sizes responsive at least to the content:
The most important changes:
Use 'Calc' to set the width. Support is reasonable well (see caniuse), but you could also solve this differently using negative margins (or probably other ways as well).
.infobox h3 {
width: calc(100% + 20px);
}
The right arrow can simply be solved by setting right to -12px, just as the left one has left: -12px.
.infobox-container .triangle-r {
right: -12px;
}
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
padding: 10px 5px 5px 5px;
margin:10px;
position: relative;
z-index: 90;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #424242;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox h3 {
position: relative;
width: calc(100% + 20px);
color: #fff;
padding: 10px 5px;
margin: 0;
left: -15px;
z-index: 100;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background: #3198dd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
font-size: 160%;
text-align: center;
text-shadow: #2187c8 0 -1px 1px;
font-weight: bold;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
left: -13px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
position: absolute;
right: -12px;
top: 54px;
z-index: 2; /* displayed under infobox */
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>This is the Headewefewfewfewfewfewfewfr</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
I have one question with inverted triagle image overlay. I have created this DEMO from codepen.io.
What i want in my demo you can see there is a bubble div inside an image. a triangle on the right side of the image looks.I would like it to appear in the triangle in the picture. How can i do this anyone can help me ?
CSS:
.bubble
{
position: fixed;
width: 345px;
height: 235px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #d8dbdf;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 16px;
}
.film_bilgileri{
float:left;
width:345px;
height:235px;
background-color:red;
}
.film_kapak{
float:left;
width:345px;
height:120px;
background-color:white;
overflow:hidden;
}
.film_kapak img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
HTML:
<div class="container">
<div class="bubble">
<div class="film_bilgileri">
<div class="film_kapak">
<img src="abc.jpg">
</div>
</div>
</div>
</div>
One way is to create a transparent triangle using white borders, and masking above and below using an element with white background.
transparent triangle using white masking is created by:
border-left: 11px solid transparent;
border-top: 11px solid white;
border-bottom: 11px solid white;
working example: http://jsfiddle.net/064ojpm8/
(note - it's not production material, but merely to give you the idea)
If you want your triangle point towards your image, you can use the code from Sgoldy in your :after pseudo-element:
.bubble:after {
content: '';
position: absolute;
width: 0;
border-right: 11px solid white;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
z-index: 1;
right: 0px;
top: 36px;
}
I just moved the element to the left with right: 0px; and altered the border values.
You don't need the :before
DEMO