I need to create the above visual using only css and only one div having 300px height and width. I tried gradient but could not get anything same. Anyone can help please?
gradient is a fine idea, you could even add content, no matter the size for the gradient, as long as you size it to be a square:
div {
background-color: red;
border-radius: 0 0 50% 50%;
background-image:
linear-gradient(-45deg, transparent 75%, blue 75%),
linear-gradient(45deg, transparent 75%, yellow 75%),
linear-gradient(to top, green 50%, transparent 50%);
height: 300px;
width: 300px;
transition:0.5s;
}
div:hover {
height: 150px;
width: 150px;
}
/* fun */
div {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 2.5em;
color: white;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
box-shadow: 0 0 5px gray, inset 0 0 0 3px white,inset 0 0 5px black;
}
<div>Hover me</div>
You can try having a few divs and then have it encapsulated inside one div.
Check out my code on JSfiddle.
.main {
width: 300px;
height: 300px;
}
.first {
width: 300px;
height: 150px;
}
.blue {
width:150px;
height: 150px;
position: relative;
float: left;
background-color: blue;
}
.yellow {
width:150px;
height: 150px;
position: relative;
float: right;
background-color: yellow;
}
.green {
width: 300px;
height: 150px;
background-color: green;
border-radius: 0 0 500px 500px;
}
.red {
position: relative;
height: 150px;
top: -400px;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid red;
}
<div class="main">
<div class="first">
<div class="blue">
</div>
<div class="yellow">
</div>
</div>
<div class="green">
</div>
<div class="red">
</div>
</div>
Related
Is there a way to convert this box shadow into a drop shadow?
box-shadow: inset 0 0 0.32vw 0.2vw #0a0e0f40;
I'd like to achieve something like this, but with drop-shadow:
.card {
background: #fff;
border-radius: 2vw;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 300px;
box-shadow: inset 0 0 2vw 0.4vw #0a0e0f40;
}
body {
background: #e2e1e0;
text-align: center;
}
<div class="card card-1"></div>
drop-shadow() does not have an inset and spread-radius, so no.
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow and https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
Unless you mean just removing the inset property...
#yoda {
width: 100px;
height: 100px;
margin: 3px;
background: darkgreen;
box-shadow: 0 0 0.32vw 0.2vw #0a0e0f40;
}
#spongebob {
width: 100px;
height: 100px;
margin: 3px;
background: yellow;
box-shadow: 0.4vw 0.4vw 0.32vw 0.2vw #0a0e0f40;
}
<div id="yoda"></div>
<div id="spongebob"></div>
I have tried the above shape. but can not able to achieve this
.left {
background: linear-gradient( -90deg, #fff, #fff 38%, red 22%) !important;
border: 1px solid blue;
margin-left: -9px;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
border-radius: 50%;
bottom: 0;
height: 18px;
left: 0;
margin: auto 0;
position: absolute;
top: 0;
transition: all 0.2s linear;
width: 18px;
}
.right {
background-color: transparent;
border: 1px solid blue;
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
border-radius: 50% !important;
bottom: 0 !important;
height: 18px !important;
margin: auto 4px !important;
position: absolute !important;
top: 0 !important;
transition: all 0.2s linear !important;
width: 18px !important
}
<div class="left"></div>
<div class="right"></div>
You could accomplish this by carefully stacking three circles in a wrapper:
A filled circle on the right
A hollow circle atop it to the left
Another hollow circle at the top of the stack on the right
That said, I'd tend to agree with #Paulie_D that this may not be worth the effort to do w/ plain markup, and that SVG would be better.
See it working below:
.wrapper {
width: 60px;
position: relative;
}
.circle {
height: 40px;
width: 40px;
border-radius: 40px;
border: 2px solid blue;
}
.filled {
background-color: blue;
}
.fill-white {
background-color: white;
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
<div class="wrapper">
<div class="circle filled right"></div>
<div class="circle fill-white left"></div>
<div class="circle right"></div>
</div>
gradient coloration can help you here. Hover the below to see the result
.box {
width:100px;
height:100px;
border:2px solid blue;
box-sizing:border;
border-radius:50%;
position:fixed;
top:0;
left:100px;
}
.box + .box {
left:180px;
transition:0.5s;
background:
radial-gradient(
circle 50px /* half the width/height of the circle*/
at 152px 52px, /* 152px = 100px (left) + 50px + 2px (border) 52px = 0 (top) + 50px + 2px (border)*/
blue 98%,#0000) fixed;
}
html:hover .box + .box {
left:20px;
}
<div class="box"></div>
<div class="box"></div>
My attempt is like this:
.circle{
height: 80px;
width: 80px;
border: 6px solid #098688;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box {
position: relative;
width: 100px;
height: 57px;
border: solid 5px #098688;
border-color: transparent transparent #098688 transparent;
border-radius: 7px 7px 167px 154px;
text-align: left;
}
<div class="circle">
<h2>15+</h2>
</div>
<div class="box"></div>
<p>Years in Business</p>
If I minimize the height to take it close to the circle then the curve becomes flat But I need this like the way it is shown in the image.
You can do this with one element like below:
.box {
width: 80px;
height: 80px;
border-radius: 50%;
padding:5px; /*distance between full border and bottom boroder*/
/*full border */
background:
radial-gradient(farthest-side,transparent calc(100% - 6px), #098688 calc(100% - 5px))
content-box;
/* bottom border */
border: 5px solid transparent;
border-bottom-color:#098688;
display:flex;
align-items:center;
justify-content:center;
}
<div class="box">
<h2>15+</h2>
</div>
Another idea with box-shadow:
.box {
width: 80px;
height: 80px;
border-radius: 50%;
/*full border */
box-shadow:
0 0 0 5px #ffffff inset,
0 0 0 10px #098688 inset;
/* bottom border */
border: 5px solid transparent;
border-bottom-color:#098688;
display:flex;
align-items:center;
justify-content:center;
}
<div class="box">
<h2>15+</h2>
</div>
It would work with an absolute positioning, shown below, a relative positioning will not allow you to overlap divs
.box {
position: absolute;
top: 12.5%;
left: 0%;
width: 100px;
height: 57px;
border: solid 5px #098688;
border-color: transparent transparent #098688 transparent;
border-radius: 7px 7px 167px 154px;
text-align: left;
}
I have a div that I want to be gradient filled. I also want to add a double border to the div but I do NOT want it to have the color gradient of the div.
I have my code here to show the problem:
http://jsfiddle.net/753rxozh/1/
.colors {
width: 100px;
border: 10px double black;
/* box-shadow:inset 0 0 0 10px black; */
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange);
}
<div class="colors"></div>
I tried messing around with box-shadow, but couldn't figure out how to make that a double border.
With the code above this is what I get:
I would like to get the border to not have that "reversed color" or any color at all. Between the 2 borders should just be white.
You can manipulate box-shadow property... you can have more than one!
.colors {
width: 100px;
padding: 10px;
height: 50px;
background: linear-gradient(white, orange);
box-shadow:
inset 0 0 0 2px black,
inset 0 0 0 8px white,
inset 0 0 0 10px black;
}
<div class="colors"></div>
You can use an outline with a black border and box shadow
.colors {
outline: 3px solid white;
width: 100px;
border: 2px solid black;
box-shadow: 0 0 0 6px black;
padding: 10px;
height: 50px;
margin: 0 auto;
background: linear-gradient( #fff, orange);
}
<div class="colors"></div>
You can simply adjust the background-clip of the gradient and you can keep the transparency:
.colors {
width: 100px;
border: 10px double black;
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>
Another idea is to consider outline-offset and you can still keep the transparency:
.colors {
width: 100px;
border: 2px solid black;
outline:2px solid black;
outline-offset:4px;
padding: 10px;
height: 50px;
margin:10px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>
I have a div with a 1px border and I'm trying to create a 3px border in another color to that div. I'm using this code:
box {
border: 1px solid #ddd;
border-top: 3px solid #3F9BD0;
}
but at the corners the border is not good, see image:
How can I make this border look good, like this:
fiddle: https://jsfiddle.net/15tory3z/
Instead of border-top, try using the :after pseudo-element to recreate the effect you want.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}
<div class="box"></div>
Choice 2:
Use linear-gradient().
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}
<div class="box"></div>
You could draw these with inset shadows and padding :
div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}
<div></div>
or just an outset top shadow
div {
width: 40%;
height: 200px;
border:2px solid gray;
border-top:none;
box-shadow: 0 -10px #3F9BD0;
margin-top:12px;
}
<div></div>
else, background gradient could be used and even animated 2 examples : http://codepen.io/gc-nomade/pen/IGliC or http://codepen.io/gc-nomade/pen/pKwby
This also puts a line on top:
.box1 {
border: 10px solid #ddd;
border-top: 0;
box-shadow: 0 -30px 0 #3F9BD0;
float: left;
width: 300px;
height: 300px;
}
<div class="box1"></div>
Use css :after pseudo-class, docs
.box_big {
border: 10px solid #ddd;
position:relative;
z-index: 1;
}
.box_big:after{
height: 10px;
position: absolute;
top:-10px; left:-10px; right:-10px;
content: " ";
z-index: 2;
background: red;
}
.box {
border: 1px solid #ddd;
position:relative;
z-index: 1;
}
.box:after{
height: 3px;
position: absolute;
top:-3px; left:-1px; right:-1px;
content: " ";
z-index: 2;
background: red;
}
<div class="box_big">
big box
</div>
<hr />
<div class="box">
your box
</div>
Welcome to the css borders. The only way to properly do that is using :after or :before pseudoelements.
Fiddle
.box {
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
display: block;
content:'';
/* Positioning */
top: 0;
width: 100%;
height: 3px;
left: 0;
right: 0;
/* Color */
background-color: #3F9BD0;
}
Try this:
.box {
outline: 2px solid #ddd;
margin-top: -2px;
border-top: 10px solid #3F9BD0;
min-width:100px;
min-height:100px;
float:left;
}
<div class="box"></div>
The question is a bit old but I thought I'd make a suggestion that worked for me in a similar situation.
I just set border-width: 0; and that took away the mitered ends and made them nice and square for a button that I had a bottom-border applied.