When adding rotation to the div in the picture, this grey line appears. Without transforming (rotating) it, this does not happen. How can I get rid of this grey line? The background and borders are supposed to be transparent. The elements are rotatable, therefore I need this css property.
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
border-top-left-radius: 0;
border-bottom-right-radius: 0;
background-color: transparent;
box-shadow: 3px 0 0 0 black;
transform: rotate(20deg);
border-bottom: 0;
border-right:0;
}
<div class="bow"></div>
It looks like box-shadow is causing the problem here. If you remove that and also add a border-right property (same values as border-top), you can get the same look without the extra gray line:
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-right: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
background-color: transparent;
transform: rotate(20deg);
}
<div class="bow"></div>
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-right: 3px black solid;
border-top-right-radius: 50px;
background-color: transparent;
transform: rotate(20deg);
border-bottom: none;
}
<div class="bow">
</div>
Consider removing the box-shadow.
.bow {
position: absolute;
width: 30px;
height: 30px;
border-top: 3px black solid;
border-top-right-radius: 50px; /* 100px of height + 10px of border */
border-top-left-radius: 0;
border-bottom-right-radius: 0;
background-color: transparent;
/* box-shadow: 3px 0 0 0 black; */
transform: rotate(20deg);
border-bottom: 0;
border-right:0;
}
<div class="bow">
</div>
Related
I'm looking for a way to draw a special shape like in the picture using Css3. Any idea or drawing way to draw that shape using Css3?
I have referenced several ways but it just draws into a normal triangle.
#shape {
width: 0;
height: 0;
border-left: 72px solid transparent;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
}
<div id="shape"></div>
you can add border-bottom-right-radius in your #shape css. you just need to set the border-left to white or depending on your background color of your div to match the color
#shape {
width: 0;
border-left: 72px solid white;
border-right: 0px solid transparent;
border-bottom: 72px solid red;
border-bottom-right-radius: 20px;
}
<div id="shape"></div>
it can be done using an after element on shape
#shape{
width: 100px;
height: 100px;
border-left: 0px solid transparent;
border-top: 0px solid transparent;
border-right: 1px solid blue;
border-bottom:1px solid blue;
border-bottom-right-radius: 25px;
position: relative;
overflow: hidden;
}
#shape::after{
content:"";
position: absolute;
background-color: blue;
width: 1px;
height: 150%;
bottom: 0;
transform-origin: bottom;
transform: rotateZ(45deg);
}
<div id="shape"></div>
Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code.
Is this possible? Or am I better off using border-image for this?
(Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result)
.bubble{
height: 200px;
width: 275px;
opacity: 0;
margin-top: 41px;
float: right;
background-color: #F2F2F2;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #B2B2B2;
}
.bubble::after {
height: 0px;
width: 0px;
content: "\00a0";
display: block;
margin-left: -10px;
margin-top: 28px;
border-width: 10px 10px 10px 0;
border-style: solid;
border-color: transparent #F2F2F2 transparent transparent;
-webkit-box-shadow: 0px 0px 6px #B2B2B2;
}
Instead of using a triangle hack, you can just rotate a div using transform and get a real box-shadow. Since you only want the shadow on one side of the div (the visible triangle side), you have to make the blur smaller and lower the opacity.
Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/
HTML:
<div class="bubble"></div>
CSS:
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0px 0px 6px #B2B2B2;
height: 200px;
margin: 20px;
width: 275px;
}
.bubble::after {
background-color: #F2F2F2;
box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
content: "\00a0";
display: block;
height: 20px;
left: -10px;
position: relative;
top: 20px;
transform: rotate( 45deg );
-moz-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
-o-transform: rotate( 45deg );
-webkit-transform: rotate( 45deg );
width: 20px;
}
Output:
Here is a complete working example in full (S)CSS, with
variables for nose size shadow width and an optional border.
The trick is to get the offsets and transform right to achieve pixel-perfection, and to use overflow:hidden as necessary to cut the nose of your bubble (especially if you need borders).
The example in the answer above doesn't work for us because the shadow gets cropped and is laid over the main bubble area.
Degrades gracefully in IE7/8.
HTML:
<div class="chat">
<div class="bubble">
<span class='tail'> </span>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</div>
</div>
SCSS:
$shadow_radius = 6px;
$nose_size = 12px;
$shadow = 0 1px $shadow_radius #B2B2B2;
$border = 1px solid #bbb
.chat {
font-family: sans-serif;
font-size: small;
}
.bubble {
background-color: #F2F2F2;
border-radius: 5px;
border: $border;
box-shadow: $shadow;
display: inline-block;
padding: 10px 18px;
margin-left: ($shadow_radius + $nose_size);
margin-right: ($shadow_radius + $nose_size);
position: relative;
vertical-align: top;
}
.tail {
position: absolute;
top: $nose_size;
left: -($shadow_radius + $nose_size);
height: ($shadow_radius + $nose_size);
width: ($shadow_radius + $nose_size);
overflow: hidden;
}
.tail:before {
border: $border;
background-color: #F2F2F2;
box-shadow: $shadow;
content: "\00a0";
display: block;
position: absolute;
top: 0px;
left: $nose_size;
height: $nose_size;
width: $nose_size;
-webkit-transform: skew( -45deg );
-moz-transform: skew( -45deg );
}
Another solution is to use filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); It only places the shadow around the objects shape.
I know It's a little bit tricky but, seems nice to me.
Here is the fiddle http://jsfiddle.net/dzfj6/
HTML
<div class="bubble">
<div class="triangle"></div>
<div class="border"></div>
<div class="content">some content</div>
</div>
CSS
.bubble
{
height: 200px;
width: 275px;
float:right;
margin-top: 41px;
margin-left:11px;
background-color: #f2f2f2;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #b2b2b2;
position:relative;
z-index:1;
}
.triangle
{
position:absolute;
top:12px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 10px solid #f2f2f2;
margin-left:-9px;
z-index:3;
}
.border
{
position:absolute;
top:12px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 10px solid #e0e0e0;
margin-left:-10px;
z-index:2;
}
.content{
padding:10px;
}
Instead of box-shadow, you can simply use border for buble.
Don't use box-shadow.
height: 200px;
width: 275px;
float:right;
margin-top: 41px;
margin-left:11px;
background-color: #f2f2f2;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #b2b2b2;
position:relative;
z-index:1;
I am trying to achieve the top right triangle as in the picture shows but when I apply border radius why does it apply borders to all side as I specified only one side radius. Although I applied border-top-right-radius: 5px; instead of border-radius: 0px 5px 0px 0px; I get the same result. Any Help?
HTML:
<div class="pricing-head">
<h3>Rainmarker</h3>
<span>For up to 10 users</span>
<div class="ribon"></div>
</div>
CSS:
.pricing-head {
background-color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 20px;
}
.pricing-head .ribon {
position: absolute;
top: 0;
right: 0;
width: 75px;
height: 75px;
}
.pricing-head .ribon:before {
content: "";
position: absolute;
right: 0;
top: 0;
border-bottom: 70px solid transparent;
border-left: 70px solid transparent;
border-right: 70px solid #ffad6a;
border-radius: 0 5px 0 0;
}
For a rounded top-right border, do:
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
Generator: http://border-radius.com/
To get a top-right triangle, do:
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #009999 transparent transparent;
Generator: http://triangle.designyourcode.io/
To get both the top-right corner triangle and top-right rounded border radius, use a container to the corner with border-radius and overflow:hidden.
.container {
position: relative;
width: 300px;
height: 100px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
overflow: hidden;
border: 1px solid gray;
}
.corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 0;
border-color: transparent #009999 transparent transparent;
}
.content {
font-family: "Verdana";
font-size: 12pt;
text-align: center;
height: 100px;
line-height: 100px;
}
<div class="container">
<div class="corner"></div>
<div class="content">
Rainmarker
</div>
</div>
OUTPUT
Heres a pen showing what you want: http://codepen.io/anon/pen/VeEKLP
You needed :
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;
Heres a good resource for making css triangles: http://apps.eky.hk/css-triangle-generator/
I am trying to create a css design like the image attached below. Actually I need to create this style only using CSS without using any images.
I tried get it to work but not sure How to create inner triangle.
This is my HTML -
body {
background: #cdc6e1;
}
.content-box {
background: #28166f;
width: 250px;
height: 100px;
}
.tag {
background: #f8c300;
width: 100px;
height: 0;
padding-left: 10%;
padding-bottom: 10%;
overflow: hidden;
}
.tag:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #f8c300;
}
<div class="content-box">
<div class="tag">
<h1>1<span>st</span></h1>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
Hope somebody may help me out to achieve to this custom style.
Thank you.
A basic mockup would be to use some pseudo elements in order to generate this:
.outer {
height: 200px;
width: 400px;
background: purple;
border: 10px solid pink;
position: relative;
text-Align: right;
font-size: 50px;
line-height: 200px;
}
.outer:before,
.outer:after {
height: 0;
width: 0;
position: absolute;
content: "";
border-bottom: 100px solid yellow;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
bottom: 0;
left: 20px;
z-index: 8;
}
.outer:after {
border-bottom: 130px solid blue;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
z-index: 0;
}
.place {
position: absolute;
left: 50px;
color: red;
bottom: -20px;
font-size: 100px;
line-height: initial;
z-index: 10;
text-shadow:
3px 3px 0 white,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
<div class="outer">First Place
<div class="place">1st</div>
</div>
Note. The text outline property is yet to be implemented in any of the major browsers yet, so it may require a 'larger white text' to be positioned behind to create this text outline in your mockup.
A workaround (as stateed in the comments) would be to 'hack' the text shadow:
text-shadow:
3px 3px 0 white, /* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
Text Stroke
Although only available in webkit broswers, you may possibly want to use text-stroke for your 'white border' to the text (unavailable in IE or Firefox)
div {
font-size: 50px;
position: relative;
height: 50px;
width: 50px;
color: black;
}
div:before {
content: "1st";
z-index: -1;
left: 0;
top: 0;
position: absolute;
-webkit-text-fill-color: black;
-webkit-text-stroke: 8px red;
}
html {
background: gray;
}
<div>
1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers
Create a duplicate triangle and place it behind. Code given below. JSBin: http://jsbin.com/totewinizu/2/
HTML:
.tag {
width: 100px;
display: block;
position: relative;
top: 20px;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
height: 0px;
width: 0px;
z-index: 99;
}
.dupe {
position: absolute;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
top: 40px;
left: 20px;
z-index: 9;
}
<div class="content-box">
<div class="tag">
<h1>1</h1><span>st</span>
</div>
<div class='tag dupe'>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
I want the double round border around my image that is actually square image.
I tried creating. here is the js fiddle . The exact that i want is this
Here is the code
CSS
.home_boxes {
background: none repeat scroll 0 0 #f1917b;
color: #ffffff;
padding: 40px 0;
text-align: center;
}
img {
border: 5px solid #ffffff;
border-radius: 50%;
margin: 20px;
outline: 2px solid #ffffff;
outline-offset: 9px;
}
img:before {
border: 5px double #ff0000;
border-radius: 50%;
bottom: 10px;
content: "";
left: 10px;
position: relative;
right: 10px;
top: 10px;
}
HTML
<div class="home_boxes">
<div class="col-md-4">
<img src="http://placehold.it/310x311">
</div>
</div>
Please any help is really appreciated.
Use box-shadow. It can have several values:
img {
/* first white ring */
border: 5px solid #ffffff;
/* background 5px ring + ring link border */
box-shadow: 0 0 0 5px #f1917b, 0 0 0 10px #fff;
border-radius: 50%;
margin: 20px;
}
Fiddle with double circle border.
if the image is not transparent PNG. you can use padding and background , just like below;
img {
border: 5px solid #ffffff;
padding:5px; background:blue;
border-radius: 50%;
margin: 20px;
}
demo here ----> FIDDLE