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>
Related
I'm trying to achieve the border that looks like the image when on hover:
I'm not sure how to describe the border. But any ways to achieve this ?
.text {
width: 100px;
height: 20px;
text-align: center;
}
.text:hover {
border: 1px solid black;
}
<div class="text"> Sample </div>
Using hover with before and after
.text {
position: relative;
width: 100px;
height: 20px;
text-align: center;
}
.text:hover::before,
.text:hover::after {
content: '';
position: absolute;
border: 1px solid black;
border-bottom: 0;
width:100%;
left:0;
height: 20%;
}
.text:hover::after {
bottom: 0;
border: 1px solid black;
border-top: 0;
}
<div class="text"> Sample </div>
You can add ::before and ::after selectors with the same background of the div (here, by default, white) to overwrite the border as follows.
.text {
width: 100px;
height: 20px;
text-align: center;
position: relative;
}
.text:hover {
border: 1px solid black;
}
.text:hover::before,
.text:hover::after {
content: " ";
position: absolute;
background: white;
top: 5px;
height: 10px;
width: 1px;
}
.text::before {
left: -1px;
}
.text::after {
right: -1px;
}
<div class="text"> Sample </div>
A simple border-image can do the trick
.text {
display:inline-block;
padding:10px;
text-align: center;
font-size:25px;
border:2px solid transparent;
}
.text:hover {
border-image: linear-gradient(#000 30%, transparent 0 70%,#000 0) 2;
}
<div class="text"> Sample </div>
HTML:
<div class="rectangle">Some text</div>
CSS:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
}
Is there any way to make div looks like in the photo?
You can use ::after and ::before to achieve the result.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
}
/* for the triangular shape */
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
z-index:1000;
}
/* for hiding the portion except the border
of the triangle shape */
.rectangle::before {
content: "";
position: absolute;
right:-40px;
bottom: 0;
top:0;
width: 0;
height: 0;
border-left: 40px solid white;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
z-index:1001;
}
<div class="rectangle">Some text</div>
In case you don't need border like structure then you can avoid ::before portion and set background color to main div.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
background:red;
}
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
<div class="rectangle">Some text</div>
For more shapes refer : CSS Tricks
To keep only the border without filling the div, You can try using ::before and ::after.
Something like this:
.rectangle {
width: 200px;
height: 40px;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.rectangle::after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 2px;
border-top: 18px solid transparent;
border-left: 10px solid #fff;
border-bottom: 17px solid transparent;
}
.rectangle::before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -2px;
height: 0;
border-top: 22px solid transparent;
border-left: 14px solid red;
border-bottom: 22px solid transparent;
}
<div class="rectangle">Some text</div>
Consider rotating a pseudo-element by declaring a transform: rotate() property value, as demonstrated in the code snippet embedded below.
As an alternative to achieving the same behaviour declaring border property rules, this method allows borders to be declared on the element in an intuitive manner using only one pseudo-element.
Rotating an element in this way also gives you the option to fill in the element with a solid colour - allowing you more freedom in customization.
Code Snippet Demonstration:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
/* additional */
border-right: 0;
box-sizing: border-box;
position: relative; /* required */
}
/* Additional */
.rectangle:after {
content: "";
position: absolute;
width: 55px;
height: 55px;
border-right: 5px solid red;
border-top: 5px solid red;
box-sizing: inherit;
right: -28px;
top: 7px;
transform: rotate(45deg);
}
<div class="rectangle">Some text</div>
Check CSS Shapes
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
<div id="pointer">
</div>
you have to use the pseudo class after
.rectangle {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:red;
text-align:center;
line-height:40px;
}
.rectangle:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid red;
border-bottom:20px solid transparent;
}
<div class="rectangle">Some text</div>
You can do it using :before and :after
.rectangle {
width: 300px;
height: 80px;
border: 5px solid blue;
border-right: none;
position: relative;
}
.rectangle::before {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
bottom: 16px;
transform: rotate(-21deg);
}
.rectangle::after {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
top: 16px;
transform: rotate(21deg);
}
<div class="rectangle">Some text</div>
.step2 {
background-color: #f1f1f1;
color: #000;
margin: 0 -87px 0 33px;
padding: 30px 40px 0 40px;
height: 212px;
text-align: center;
}
.step2:before {
border-top: 40px solid transparent !important;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute;
right: -40px;
top: 0;
}
<div class="col-lg-3">
<div class="step2">
Step 1
</div>
</div>
I am developing a website but now I got stucked to achieve css for the Steps portion (Step 1, Step 2, Step 3) given in the image below :
This is the link for the image
Can anyone help me to achieve CSS ?
Play around with it and adjust the sizes and fonts according to your needs !
span{
position: absolute;
width : 100px;
margin-left: 30%;
margin-top: 40%;
}
.orange {
vertical-align: middle;
color: white;
position:relative;
background-color:#333;
height:100px !important;
width:100px !important;
z-index:3;
border-bottom-left-radius: 50%;
float: left;
margin-right:2px;
}
.orange:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
z-index:2;
margin-right:2px;
float: left;
}
.green:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
.blue {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
border-top-right-radius: 50%;
float: left;
}
.blue:after {
content:'';
position: absolute;
top: 100%;
left: 100%;
margin-left: 250px;
width: 0;
height: 0;
}
.blue:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
<div class="orange"><span>Step 1</span></div>
<div class="green"><span>Step 2</span></div>
<div class="blue"><span>Step 3</span></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 want to make a div that is like that, but i have no clue. I can do it with svg or images, but that is not how i want it. Here is my code
HTML
<div class="FooterWhite"> </div>
CSS
.FooterWhite {
background-color:white;
height:50%;
width:100%;
}
try this :
.shape {
width: 200px;
height: 70px;
background: #000;
margin: 50px;
position: relative;
}
.shape:before {
display: block;
content: "";
height: 0;
width: 0;
border: 50px solid #f00;
border-bottom:50px solid transparent;
border-left: 50px solid transparent;
position: absolute;
top: 70px;
}.shape:after {
display: block;
content: "";
height: 0;
width: 0;
border: 50px solid #f00;
border-bottom: 50px solid transparent;
border-right:50px solid transparent;
position: absolute;
top: 70px;
left:100px;
}
JSFIDDLE DEMO