I want to create a div with border-radius 50% and having blue background such that right side part of curve should be filled with another color say light blue. How do we do that using css pseudo elements
#circle{
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
}
You can use the following solution:
#circle{
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
position:relative;
}
#circle:after {
content:"";
display:block;
position:absolute;
left:50%;
top:0;
height:100%;
width:50%;
background:lightblue;
z-index:-1;
}
<div id="circle"></div>
Related
I have a shape that looks like this
It is a rectangle with a circle behind it. I need to do a border all around it.
I tried to do a border for the rectangle and a curved line for the curved part (based on this). It doesn't seem to be precise enough. The curved line don't align 100% with the circle part. I need precision.
Putting the same shape a bit bigger behind it does not work for what I need.
Code - jsfiddle
.template {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rectangle {
background: red;
width: 91mm;
height: 63mm;
border-radius: 2mm;
}
.circle {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: -999;
background: red;
width: 68mm;
height: 68mm;
border-radius: 100%;
}
<div class="template">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
Any ideas of how I could achieve that sweet border?
Use a pseudo element with radial-gradient:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;
}
<div class="box">
</div>
Then you can add border:
.box {
width:200px;
height:150px;
background:red;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,red 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
<div class="box">
</div>
And also use a transparent color:
.box {
width:200px;
height:150px;
background:rgba(255,0,0,0.5) padding-box;
border-radius:10px;
position:relative;
margin-top:50px;
border:3px solid blue;
border-top-color:transparent;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:0;
right:0;
height:50px; /* Same as margin*/
background:radial-gradient(circle,rgba(255,0,0,0.5) 49.5%,blue 50% calc(50% + 3px),transparent calc(50% + 4px)) top/150% 400%;
}
.box:after {
content:"";
position:absolute;
top:-3px;
height:100%;
left:-3px;
right:-3px;
border-top:3px solid blue;
border-right:3px solid transparent;
border-left:3px solid transparent;
border-radius:inherit;
clip-path:polygon(0 0,28px 0,28px 50px,calc(100% - 28px) 50px,calc(100% - 28px) 0, 100% 0,100% 100%,0 100%);
}
body {
background:url(https://picsum.photos/id/1001/800/800) center/cover;
}
<div class="box">
</div>
I have a div, padding set to 50px both left and right.
Is it possible to add the purple border?
I cannot add code to the HTML, this should be done with pure css if possible. I tried to trick this with border-image and adding gradients but I could only add like this:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
border-top: 5px solid black;
border-image: linear-gradient(to right, white 50px, purple 0%);
border-image-slice: 1;
}
<div>Content</div>
https://jsfiddle.net/u7zq0amc/1/
Use a pseudo element instead:
div {
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-right: 50px;
position:relative;
margin-top:20px;
}
div:before {
content:"";
position:absolute;
height:5px;
top:-5px;
right:50px;
left:50px;
background:red;
}
<div>Content</div>
Is it possible to make something similar to this image with CSS? Each side of the rectangle has a curve on it. This is different to straight sides with only the border being rounded.
You can achieve the curved sides and pointed corners with the intersection of 2 oval shapes. You can use an oval div with hidden overflow and an oval pseudo element with the black background.
The pseudo element needs to be centered in it's parent. In the following example, I used absolute positioning to center it :
div{
position:relative;
width:600px; height:150px;
margin:0 -150px;
border-radius:50%;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
top:-175px; left:150px;
height:500px; width:300px;
border-radius:inherit;
background:#000;
}
<div></div>
TV screen
https://css-tricks.com/examples/ShapesOfCSS/
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
You can achieve something similar using border-radius (shown below)
#rectangle {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
This is a CSS3 feature. Have in mind that it only works on IE9 and up.
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
I don't know if it is tricky.
Here is a jsFiddle simple <div>hello</div>:
Is there any easy way to color the top left pixel of that div in red?
Thank you.
You can do this :
div:before{
position: absolute;
width:1px;height:1px;
background:red;
content:'';
}
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
Demonstration (with a bigger red dot, so that it's obvious)
For browser compatibility you could add a span inside your div:
<div><span></span>hello</div>
Then add styling:
div {
border:1px solid green;
height:200px;
background-color:yellow;
position:relative;
}
div span {
position:absolute;
height:1px;
width:1px;
background:red;
top:0;
left:0;
}
By this way :
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
div span {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: red;
}
http://jsfiddle.net/m3GMc/1/
Or via an image.
You should be able to use:
first-pixel-color-top-left-color: #f00;