I have to code a shape(below image) in HTML
And below is the code what I tried so far:
body {
font: 13px Verdana;
}
h3 {
height: 100px;
background: #72bbab;
border-radius: 50px 10px 10px 50px;
display: flex;
margin-top: 50px;
position: relative;
line-height: 100px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
}
h3 i {
width: 130px;
height: 130px;
transform: translateY(-15px);
background: #71bbab;
border-radius: 50%;
position: relative;
margin-right: 20px;
}
h3:before {
content: "";
position: absolute;
border: 1px dashed #fff;
top: 5px;
bottom: 5px;
left: 20px;
right: 2px;
border-radius: 10px;
}
h3 i:before {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
border: 1px dashed #fff;
border-radius: 50%;
}
<h3><i></i>Text</h3>
Now the issue is I am not able to remove dashed border of circle from right side. I tried border-top:0 and border-right:0 but didn't work.
Thanks in advance
Note: Don't want to use any king of image
If you need to get the output by keeping same HTML mark-up then you have to use many pseudo selectors, CSS calc() function to calculate h2 tag width and many such properties to get output using CSS.
You have too even use position and z-index to hide circle border backside of h2 tag. And using margin you could arrange the remaining, so at one point whole diagram connects.
body {
font: 13px Verdana;
}
h3{
background:#72bbab;
width:calc(100% - 95px);
height:85px;
margin-left:95px;
margin-top:21px;
display:flex;
justify-content:flex-start;
align-items:center;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
padding-left:20px;
box-sizing:border-box;
color:#fff;
}
h3 i{
width:120px;
height:120px;
background:#72bbab;
border-radius:50%;
display:inline-block;
top:2px;
left:2px;
position:absolute;
z-index:-1;
overflow:hidden;
}
h3 i:before{
content:"";
width:100px;
height:100px;
border:2px dashed #fff;
position:absolute;
top:8px;
left:8px;
border-radius:50%;
}
h3:before{
content:"";
width:calc(100% - 120px);
height:65px;
border:2px dashed #fff;
position:absolute;
right:15px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
h3:after{
content:"";
width:3px;
height:68px;
background:#72bbab;
position:absolute;
top:28px;
margin-left:-61px;
}
<h3><i></i>Text</h3>
See if this helps.
https://jsfiddle.net/induprakash/8ofLjqxm/
I added a higher z-index to rectangle border.
body {
font: 13px Verdana;
}
h3 {
height: 100px;
background: #72bbab;
border-radius: 50px 10px 10px 50px;
display: flex;
margin-top: 50px;
position: relative;
line-height: 100px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
}
h3 i {
width: 130px;
height: 130px;
transform: translateY(-15px);
background: #71bbab;
border-radius: 50%;
position: relative;
margin-right: 20px;
}
h3:before {
content: "";
position: absolute;
border: 1px dashed #fff;
top: 5px;
bottom: 5px;
left: 105px;
z-index: 10;
right: 2px;
border-radius: 0px;
border-left: 0;
}
h3 i:before {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
border: 1px dashed #fff;
border-radius: 50%;
border-right : 1px solid #72bbab;
}
Try this one, its running as per your image. I have tried a simple and different approach.
JSFiddle Link - https://jsfiddle.net/deepak104080/uwx873x1/
.circle {
width:130px;
height:130px;
border-radius:65px;
position:absolute;
z-index:100;
background:#71bbab;
margin:0px;
padding:0px;
}
.innercircle {
width:110px;
height:110px;
border-radius:55px;
position:absolute;
top:9px;
left:9px;
z-index:100;
background:#71bbab;
border: 1px dashed #fff;
}
.tab {
height: 100px;
position:absolute;
margin-top:15px;
margin-left:105px;
z-index:1000;
width:350px;
background:#71bbab;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.innertab {
height: 78px;
position:absolute;
margin-top:10px;
margin-left:0px;
z-index:1000;
width:340px;
background:#71bbab;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-top: 1px dashed #fff;
border-bottom: 1px dashed #fff;
border-right: 1px dashed #fff;
}
<div>
<div class="circle">
<div class="innercircle">
</div>
</div>
<div class="tab">
<div class="innertab">
</div>
</div>
</div>
Use the ::after pseudo for h3 element.
h3:after {
z-index: 9999;
position:absolute;
max-width: 100%;
width: 100px;
height: 87px;
background: #71bbab;
content: '';
left: 35px;
margin-top: 6px;
}
https://jsfiddle.net/apyupfwo/
Related
I want to do rounded circle like below image
But I am in trouble in making inner rounded one ! I tried with border-top-style & border-right-style but not getting the same yet .
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:none;
border-right-style:none;
width:80px;
height:80px;
position:absolute;
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:inset;
border-right-style:inset;
border-top-color: transparent;
width:80px;
height:80px;
position:absolute;
transform: rotate(40deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
Try This:
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center;
}
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
width:80px;
height:80px;
position:absolute;
}
.bar:after {
width: 25px;
height: 10px;
content: '';
position: absolute;
top: -3px;
background: #A2D36E;
transform: rotate(20deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
The CodePen link demonstrates an SVG solution: https://codepen.io/UncaughtTypeError/pen/WXRObq
The Code Snippet below demonstrates x2 solutions you could explore:
Border Shape solution
Clip Path solution
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background: #A2D36E;
text-align: center;
position: relative;
}
.bar {
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
border: 1px solid white;
border-width: 3px;
margin: auto;
width: 80px;
height: 80px;
position: absolute;
}
span {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 35px;
position: absolute;
font-size: 1.6rem;
color: #fff;
font-weight: bold;
}
/* Additional */
.clip-path-solution .bar:after {
content: "";
width: 90px;
height: 90px;
position: absolute;
bottom: 0;
top: -3px;
left: -3px;
right: 0;
background: #a2d36e;
border-radius: 100%;
-webkit-clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
transform: rotate(10deg);
}
.border-solution .shape {
transform: rotate(-30deg);
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
box-sizing: border-box;
/* starting point */
/*border-right: 10px solid #d36e6e;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 90px;
height: 90px;
border-radius: 100%;*/
/* adjusted accordingly for demonstration */
margin: 0;
width: 50px;
height: 50px;
top: 10px;
margin: 0;
right: 10px;
left: auto;
border-top-right-radius: 45px;
border-bottom-right-radius: 30px;
border-right: 10px solid #a2d36e;
}
<h3>Clip Path</h3>
<div class='clip-path-solution circle'>
<div class='bar'></div>
<span>8.8</span>
</div>
<h3>Border Shape</h3>
<div class='border-solution circle'>
<div class='bar'></div>
<div class='shape'></div>
<span>8.8</span>
</div>
I am trying to recreate these borders over an image with CSS.
I have been able to create one border by using this CSS:
.bordered-image {
position: relative;
outline: 1px double white;
outline-offset: -10px;
}
But I have been unable to create the second border. Is it possible using CSS?
Hope the below code helps
body{
padding:50px;
}
.box{
width:300px;
height:200px;
border:1px solid red;
position:relative;
}
.box:after{
content:"";
position:absolute;
top:-4px;
bottom:-4px;
left:2px;
right:2px;
border:1px solid green;
}
<div class="box" >
</div>
Try the below code
<div class="module">
</div>
-
body {
padding: 20px;
}
.module {
width: 300px;
height: 200px;
position: relative;
border: 1px solid blue;
margin: auto;
}
.module:after {
content: "";
position: absolute;
top: -3px;
left: 1px;
right: 1px;
bottom: -3px;
border: 1px solid black;
margin:auto;
}
img {
border: 1px double black;
padding: 64px;
outline: 1px solid black;
box-sizing: border-box;
outline-offset: 20px;
}
something like this should work for you. You might have to play with the dimensions
body {
background: black;
}
.bordered-image {
position: relative;
height: 300px;
width: 300px;
border: 1px solid white;
margin: auto;
}
.bordered-image:before {
position: absolute;
left:-6px;
top: 4px;
display: block;
content: ' ';
margin: auto;
height: 290px;
width: 310px;
border: 1px solid white;
}
Try this:
.bordered-image {
background:black;
width:300px;
outline: 1px double white;
outline-offset: -10px;
}
.one {
width:300px;
height:300px;
position:relative;
border:1px solid white;
}
.one:after {
content: "";
width: 273px;
position: absolute;
top: 5px;
bottom: 5px;
left: 11px;
right: 2px;
border: 1px solid white;
}
<div class="bordered-image">
<div class="one">
</div>
</div>
This question already has answers here:
Any way to limit border length?
(10 answers)
Closed 5 years ago.
How can I create the "blue" and "orange" corners in CSS, like in this image:
Thanks
You can use :before and :after pseudo-classes like this:
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid #000;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -5px;
left: -5px;
border-bottom: 3px solid orange;
border-left: 3px solid orange;
}
<div><span></span></div>
If you're going to use 'before' and 'after' elements only one HTML tag is required ie. the outermost div in this case and call up the before and after elements on this element. Extra tags add up on the renderer load.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
border: 1px solid #bbb;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -5px;
right: -5px;
border-top: 3px solid blue;
border-right: 3px solid blue;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -5px;
left: -5px;
border-bottom: 3px solid red;
border-left: 3px solid red;
}
<div></div>
try this
div{
box-sizing:border-box;
}
div.outer{
height:150px;
width:150px;
position:relative;
background:#fff;
padding:2px;
}
div.inner {
border:1px solid #d6d6d6;
height:100%;
width:100%;
}
div.outer:before{
content:"";
background:#F87200;
width:25px;
height:25px;
position:absolute;
bottom:-5px;
left:-5px;
display:block;
z-index: -1;
}
div.outer:after{
content:"";
background:#0092D4;
width:25px;
height:25px;
position:absolute;
top:-5px;
right:-5px;
display:block;
z-index: -1;
}
<div class="outer">
<div class="inner"></div>
</div>
I'm trying to make such a stuff
But somehow I got something like the one below(Please ignore the color, font family for now)
My code is here.
HTML:
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
CSS:
.box{
background-color:red;
width:60%;
margin-left:20%;
height:30px;
z-index:3;
position:static;
}
.box p{
text-align:center;
color:white;
line-height:30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index:-1;
margin-top:-15px;
position:static;
}
Change position: static to position: relative for the box.
CSS-Tricks reference
z-index only effects elements that have a position value other than
static (the default).
.box {
background-color: red;
width: 60%;
margin-left: 20%;
height: 30px;
z-index: 3;
position: relative;
}
.box p {
text-align: center;
color: white;
line-height: 30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index: -1;
margin-top: -15px;
position: static;
}
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
I tried to make it exactly like the image you put.
Whenever you want to put an HTML element above or beneath another element, use the z-index property. The more the value of the z-index, it will be more on the above, and vice versa
.box{
background-color: #F8931F;
position: absolute;
width: 200px;
text-align: center;
color: #fff;
padding: 5px;
text-transform: uppercase;
left: 50%;
top: 40px;
transform: translate(-50%,0);
}
.seperator{
width: 100%;
height: 2px;
position: absolute;
background-color: #F8931F;
top: 52px;
z-index: -1;
}
<div class="box">instagram photos</div>
<div class="seperator"></div>
One suggestion is to use :after for the border.
.box{
height:30px;
z-index:3;
position:static;
}
.box p{
background-color:red;
text-align:center;
color:white;
line-height:30px;
margin: 0;
margin-left:20%;
width:60%;
}
.box:after{
border-top: 1px solid red;
border-bottom: 1px solid blue;
content: '';
display: block;
z-index:-1;
top:-15px;
position: relative;
width: 100%;
height: 0px;
}
<div class="box">
<p>Instagram Photo</p>
</div>
http://jsfiddle.net/afelixj/nrEfm/50/
I'm trying to draw a line using CSS and show text/image in the middle of the line.
.featured-images {
color: #666666;
border: 2px solid #333333;
}
<p class="featured-images">Featured</p>
This is what I want to do:
and
Wrap the text inside a span and use a :pseudo-element for the line.
Position the line(:pseudo-element) behind the span using z-index: -1, so that you could move around the text without having to worry about the line.
.featured-images {
position: relative;
color: #666666;
border: 2px solid #333333;
padding: 0 10px 0 30px;
}
.featured-images span {
color: #666666;
background: white;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #666666;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
<p class="featured-images"><span>Featured</span></p>
Replicating the following:
You could use repeating-linear-gradient to do this.
body {
background: #E7EAE3;
}
.featured-images {
position: relative;
color: #666666;
padding: 0 10px 0 30px;
overflow: hidden;
}
.featured-images span {
color: #517575;
background: white;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 120%;
height: 100%;
background: -webkit-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
background: -moz-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
background-size: 10px 31px;
margin-left: -30px;
transform: skew(-45deg);
left: 0;
z-index: -1;
}
<p class="featured-images"><span>Featured</span>
</p>
Using image instead of text.
.featured-images {
position: relative;
color: #666666;
border: 2px solid #333333;
padding: 0 10px 0 30px;
}
.featured-images span {
display: block;
width: 80px;
height: 13px;
background: url(http://lorempixel.com/80/13) no-repeat white 10px 0;
padding: 0 10px;
}
.featured-images:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #666666;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
}
<p class="featured-images"><span></span></p>
Something like this? JSFiddle
CSS:
.featured-images {
color: #666666;
}
p span {
margin:0;padding: 0 10px;
background: #FFFFFF;
display: inline-block;
}
p {
padding-left: 20px;
position: relative;
z-index: 2;
}
p:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: solid 1px #666666;
z-index: -1;
}
Demo 1
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
right:0
}
p:before{
top:-4px;
left: -24px;
height: 24px;
width: 480px;
border:solid 1px #666666
}
p:after{
top: 50%;
width: 466px;
left: -16px;
border-top: solid 1px #666666
}
<p class="featured-images">Featured</p>
Use Pseudo element
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
left:-14px;
right:0;
width: 480px
}
p:before{
top:-4px;
height: 24px;
border:solid 1px #666666
}
p:after{
top:50%;
border-top:solid 1px #666666
}
<p class="featured-images">Featured</p>
Demo 2
p{
position: relative;
margin:0;padding:0 10px;
background:white;
display:inline-block;
}
p:after{
content:"";
position:absolute;
top:50%;
left:-14px;
right:0;
width: 100vw;
border-top:solid 1px #666666;
z-index:-1;
}
<p class="featured-images">Featured</p>
Update
:root{padding: 40px}
p{
position: relative;
margin:40px auto;padding:0 10px;
background:white;
display:inline-block;
}
p:before,p:after{
content:"";
position:absolute;
z-index:-1;
right:0
}
p:before{
top:-4px;
left: -24px;
height: 24px;
width: 480px;
border:solid 1px #666666;
background-color: gray;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 6px)
}
}
p:after{
top: 50%;
width: 466px;
left: -16px;
border-top: solid 1px #666666
}
<p class="featured-images">Featured</p>
Result http://jsfiddle.net/p8jdzqvL/embedded/result/
<div style="height: 2px; background-color: black; text-align: center">
<span style="background-color: white; position: relative; top: -0.5em;">
Stay Connected
</span>
</div>