Image I'm able to achieve the top right border radius as per this design but for the left border I'm a bit confused.
.inverted-border-radius::before {
content: "";
position: absolute;
background-color: transparent;
bottom: 38px;
right: 0;
width: 20px;
height: 20px;
background: #d6dcea;
-webkit-mask-image: radial-gradient(
circle 10px at 0 0,
transparent 0,
transparent 20px,
black 21px
);
box-shadow: 0 -25px 0 0 #f66969;
}
This is css that I'm using. I know that some changes on radial-gradient will do the trick but getting really confused here.
apply border-bottom
.card {
width: 200px;
height: 50px;
border-radius: 5px;
border: 1px solid #dfe2e6;
border-bottom: 5px solid #2091bd;
}
<div class="card">
</div>
Related
I am creating a triangle with pointing towards bottom using html and css. Here I need to reduce the top width and increase the height of down pointer little bit, I tried with lots of modification, it does not work.
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
bottom: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
In CSS everything is treated as rectangle (BOX-MODEL). It’s annoying, but makes sense, If you try to apply box-shadow on rectangle layout, it's back-breaking task. So Instated of using box-shadow you can use Filter drop-shadow. Filters are not bound to the box model. That means the outline of our triangle is recognized and the transparency around it is ignored so that the intended shape receives the shadow.
Try this code:
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.triangle-with-shadow:after {
content: "";
position: absolute;
border-style: solid;
border-width: 40px 20px 0 20px;
border-color: #999 transparent transparent transparent;
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.5));
}
.triangle-with-shadow:hover,
.triangle-with-shadow:hover:after {
box-shadow: none;
}
<div class="triangle-with-shadow"></div>
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
First of all, this question might be similar to this, but the shape in my case is different, so it couldn't really help me out.
The trapezoid code is the following:
#light {
/*setting the element*/
border-bottom: 164px solid grey;
border-left: 148px solid transparent;
border-right: 165px solid transparent;
height: 0;
width: 80px;
}
<div id="light"></div>
Just to clarify, I am trying to add the shadow effect, similar to the following example:
#bulb {
/*setting the element*/
background: grey;
width: 200px;
height: 200px;
border-radius: 50%;
/*adding "light" (shadow)*/
box-shadow: 0 0 100px 10px rgba(128, 128, 128, 0.5);
}
<div id="bulb"></div>
When I try to add the regular box-shadow:, my trapezoid becomes a regular rectangle with white parts.
Instead of a box-shadow you could use a drop-shadow filter, e.g.
filter: drop-shadow(0 0 40px #222);
#light {
/*setting the element*/
border-bottom: 164px solid grey;
border-left: 148px solid transparent;
border-right: 165px solid transparent;
height: 0;
width: 80px;
filter: drop-shadow(0 0 40px #222);
}
<div id="light"></div>
More info on MDN
I would create the shape differently using pseudo element with a blur effect:
#light {
width:400px;
height:160px;
position:relative;
}
#light:before,
#light:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
/*triangle on the right*/
linear-gradient(to top right,grey 49.5%,transparent 50%) right/150px 100%,
/*triangle on the left*/
linear-gradient(to top left, grey 49.5%,transparent 50%) left /150px 100%,
/*rectangle at the center*/
linear-gradient(grey,grey) center/100px 100%;
background-repeat:no-repeat;
}
#light:before {
filter:blur(20px);
}
<div id="light">
</div>
based on css-tricks Double-Box Method you can "have a container box with hidden overflow and another box inside it which is rotate and hangs out of it"
.light {
width: 350px;
height: 135px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.light:after {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: #999;
transform: rotate(45deg);
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="light"></div>
In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.
In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.
You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.
Here are more informations about SVG.
I hope it helps.
I need some help, I have a div with border-radius and I need it to be transparent outside the circle div. I tried with :after and outline. With ":after" the border stayed within the div and with outline I couldn't get it rounded.
Does anyone know the answer ?
CSS :
div.circle {
background: black;
width: 5em;
height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
div.circle p {
padding: 2em 2em 0 2em;
color: white;
}
div.circle:after {
content:'';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 2.5em;
border: 4px solid rgba(255, 255, 255, 0.51);
}
CSS with outline property:
div.circle {
outline: 4px solid rgba(255,255,255,0.3);
background: black;
width: 5em; height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
What I want:
http://giovannigras.be/home/img.png
Use box-shadow instead of border:
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.51);
Cause a transparent border will transpare the background beneath,
while if you use the spread value in the box-shadow property you're good to go:
Example demo
Also as suggested by #vals you can go with background-clip to retain the background size into the content-box size model cause otherwise goes into the default border-box.
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
If you want your border to be transparent (or semitransparent), and you are setting a black background, you need to set the background limited to the inner part, so that the border can be seen.
The property for this is background-clip: content-box;
CSS
div.circle {
background: black;
background-clip: content-box;
width: 5em;
height: 5em;
border-radius: 50%;
border: solid 5px rgba(0,0,0,0.3);
}
fiddle
You can use a container to provide a border offset if you need it.
DEMO
HTML
<div class="border">
<div class="inner"></div>
</div>
CSS
.border {
width: 80px; height: 80px;
border-radius: 50%;
background: transparent;
border: 10px solid rgba(255,255,255,.4);
}
.inner {
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background: rgba(255,255,255,.6);
border: 10px solid transparent;
margin: 10px;
}
I'm applying a box-shadow to an element with left and right borders.
I want the box shadow to stop so it doesn't appear underneath those borders.
Is there any way to achieve this without too many crazy wrappers?
<div id="button">Box-shadow, stop before the red borders!</div>
Here's a JSFiddle: http://jsfiddle.net/AHUEY/
You could do this with a pseudo element absolutely positioned relative to your target, instead of a box shadow:
#button {
position: relative;
background: #ccc;
text-align: center;
width: 400px;
border-left: 10px solid red;
border-right: 10px solid red;
}
#button::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: black;
}
demo
This is possible using the spread parameter of the box shadow.
Please see the working fiddle
http://jsfiddle.net/prashant_11235/dkR4H/
#button {
background: #ccc;
text-align: center;
width: 400px;
height: 25px;
border-left: 10px solid red;
border-right: 10px solid red;
box-shadow: 0px 15px 0px -10px black;
}
Replace border-right and border-left with box-shadow:
#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}
http://jsfiddle.net/eEnpp/