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
Related
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>
Used two pseudo elements ::before with different border properties (see js fiddle). Despite "you can use only one ::before and one ::after pseudo element" this actualy worked. Why?
https://jsfiddle.net/8L7zou3e/1/
<div class="el"></div>
.el {
position: relative;
margin: 100px 0 0 500px;
width: 300px;
height: 100px;
background-color: #AA4343;
}
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
top: 0;
left: -50px;
}
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
top: 0px;
left: -50px;
}
You seem to have only one pseudo element.
And that's here in the UI:
Your CSS cascades to:
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
top: 0;
left: -50px;
}
See the way Chrome has treated your combined CSS:
There's only one pseudo-element but the properties are added because the two rules apply to that pseudo-element.
Your CSS is equivalent to
.el {
position: relative;
margin: 100px 0 0 500px;
width: 300px;
height: 100px;
background-color: #AA4343;
}
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
top: 0;
left: -50px;
}
It's similar to this case which probably is more obvious:
a {
color: red;
}
a {
font-weight: bold;
}
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>
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
I am trying to create hexagon using image without set background image using css.
I tried below code where display perfect but its issue in email. Background image not set in email so need to remove from background and need to set any other way. I tried lots of different way to set but not succeed. As i am not designer so.
I used below code which done but not need to set any other way.
<div class="hexagon pic">
<span class="top"></span>
<span class="bottom"></span>
</div>
.hexagon {
background: url(http://placekitten.com/400/400/);
width: 400px;
height: 346px;
position: relative;
}
.hexagon span {
position: absolute;
display: block;
border-left: 100px solid red;
border-right: 100px solid red;
width: 200px;
}
.top {
top: 0;
border-bottom: 173px solid transparent;
}
.bottom {
bottom: 0;
border-top: 173px solid transparent;
}
Anyone have a idea.
Thanks
<div id="hexagon">
<img src="image.jpg">
</div>
//styles
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;}
#hexagon > img { height: inherit; width: inherit; }
This will do the work.