I've tried to set a black solid 1px border for triangle: jsFiddle. I write the follwoing markup:
<div>
</div>
and styles
div{
position: absolute;
left:0px;
top:0px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
But I don't understand how to set the border for the triangle in this case.
You can try this too , basically i have made a larger triangle black in colour and put it behind the red one
<div id="border">
</div>
<div id="red">
</div>
#red{
position: absolute;
left:4px;
top:9px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
background-color:transparent;
z-index: 99;
}
#border {
position: absolute;
left:0x;
top:0px;
width: 5px;
height: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid black;
z-index: 0;
}
here is your solution its work
`div:before {
border-bottom: 12px solid #000000;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: -1px;
position: absolute;
top: -1px;
width: 0;
}
div:after {
border-bottom: 10px solid #FF0000;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: 111111;
}`
Related
Could someone help me make an effect like the one in the example below?
I'm trying to put unsuccessful in the responsiveness part ...
The closest I can get was as follows the code below and the image:
.content .card-l {
margin-top: 1vh;
position: relative;
border-top: 2px solid #00ffde;
border-bottom: 2px solid #c9ff04;
border-left: 2px solid #5bff69;
border-right: 2px solid #2a43c1;
}
.content .card-l::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #ba6c0e;
border-bottom: 3px solid #d3cc0b;
border-left: 3px solid #990be6;
border-right: 3px solid #9a1b3b;
}
.content .card-l::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #070400;
border-bottom: 3px solid #ff8f3a;
border-left: 3px solid #1b9fbd;
border-right: 3px solid #d87777;
}
.content .card-l .card-content {
position: relative;
background: #e0bf95;
padding: 30px;
border-top: 2px solid #82f577;
border-bottom: 2px solid #1c1f31;
border-left: 2px solid #d6d254;
border-right: 2px solid #f380de;
}
.content .card-l .card-content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #18fd03;
border-bottom: 3px solid #34eca3;
border-left: 3px solid #5528e9;
border-right: 3px solid #df2cec;
}
.content .card-l .card-content::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 3px solid #806c53;
}
You can consider multiple background and clip-path like below:
.box {
--c1:#806c53; /* first color */
--c2:#5d4e39; /* second color */
--b:20px; /* border width */
margin:10px;
width:200px;
height:100px;
font-size:25px;
outline:3px solid #321f1a; /* outer border */
border:var(--b) solid transparent;
padding:3px; /* control the inner border */
background:
linear-gradient(#e0bf94 0 0) content-box, /* main background */
linear-gradient(#321f19 0 0) padding-box; /* inner border */
position:relative;
}
/* main border */
.box:before,
.box:after {
content:"";
position:absolute;
z-index:-1;
top:calc(-1*var(--b));
right:calc(-1*var(--b));
bottom:calc(-1*var(--b));
left:calc(-1*var(--b));
background:
linear-gradient(var(--s1,var(--c1)) 0 0) center/calc(100% - var(--b)) calc(100% - var(--b)) no-repeat,
linear-gradient(var(--s2,var(--c2)) 0 0);
}
.box:after {
--s1:var(--c2);
--s2:var(--c1);
clip-path:
polygon(0 0,0 100%,var(--b) calc(100% - var(--b)),
var(--b) var(--b),calc(100% - var(--b)) var(--b),100% 0);
}
<div class="box"> some text here </div>
<div class="box" style="--b:30px;--c1:red;--c2:darkred;width:300px;"> some text here </div>
<div class="box" style="--b:10px;--c1:blue;--c2:darkblue;width:300px;"> some text here </div>
Here is an example using only one div, with no additional containers or spans, taking advantage of box shadow and the :after pseudo element.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
box-shadow: 0 0 0 2px #321f19; /* outer border */
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53; /* second border */
z-index: 1;
}
.card-1:after {
content: '';
position: absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
border: 4px solid;
border-color: #806c53 #806c53 #5d4e39 #5d4e39; /* third border */
box-shadow: inset 0 0 0 2px #321f19; /* inner and last border */
z-index: -1;
}
<div class="card-1">Lorem ipsum</div>
And you can also achieve something pretty similar with nothing but box-shadow.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53;
box-shadow: 0 0 0 2px #321f19,
inset -4px 4px 0 0 #806c53,
inset 4px -4px 0 0 #5d4e39,
inset 0 0 0 6px #321f19;
}
<div class="card-1">Lorem ipsum</div>
here you can find an example
.content {
border: 2px solid #321f19;
}
.card-l {
border-top: 4px solid #5d4e39;
border-right: 4px solid #806c53;
border-bottom: 4px solid #806c53;
border-left: 4px solid #5d4e39;
}
.card-content {
border-top: 4px solid #806c53;
border-right: 4px solid #5d4e39;
border-bottom: 4px solid #5d4e39;
border-left: 4px solid #806c53;
position: relative;
background-color: #e0bf94;
}
.card-content::before {
content: "";
width: calc(100% - 4px); /*remove one border size from the 100%*/
height: calc(100% - 4px); /*remove one border size from the 100%*/
position: absolute;
border: 2px solid #321f19;
}
span {
display: block;
padding: 30px;
text-align: center;
z-index: 1;
}
.btn {
margin: 10px auto;
display: block;
position: relative;
padding: 10px;
}
<div class="content">
<div class="card-l">
<div class="card-content">
<button id="button" class="btn">hello!!!</button>
</div>
</div>
</div>
You can always put multiple divs to contain different borders.
OR
Use border image in css. It'll be an easier approach if you can find the image. More reference here.
So I have to do tabs and I done them by creating triangles with pseudo-elements that were made with the help of borders and applied a filter: drop-shadow to them to show borders to border. In 100% zoom, everything is fine, but if you zooming out it, the borders with pseudo-elements disappers, and if you zooming in it, they collapse. What can you advise to solve this problem?
.tab {
display: flex;
font-size: 14px;
align-items: center;
position: relative;
margin-left: 40px;
height: 34px;
bottom: -6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #f0f0f0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.tab:before {
content: '';
left: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
transform: rotateY(180deg);
transform-origin: bottom;
}
.tab:after {
content: '';
right: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
}
<div class="tab"><a>tab1</a></div>
Link to fiddle: https://jsfiddle.net/Lkehqg0j/12
I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/
i want to give box shadow on the hexagon
here is my jsfiddle
jsfiddle
and this is my hexagon css property
.hex1 {
background-color: rgba(52,152,219,.5);
text-align: center;
line-height: 70px;
height: 80px;
width: 140px;
margin: 60px 10px;
position: relative;
z-index: 1;
box-shadow:2px 2px 2px 2px grey;
}
.hex1:before {
border-top: 40px solid transparent;
border-bottom: 40px solid rgba(52,152,219,.5);
top: -80px;
}
.hex1:after, .hex1:before {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
left: 0;
z-index: -1;
}
.hex1:after {
bottom: -80px;
border-top: 40px solid rgba(52,152,219,.5);
border-bottom: 40px solid transparent;
}
this is not affecting on my hexagon .. is there any way to five border and box shadow to hexagon.
please help
You Can Use these code....
#hexagon{
background: red;
width: 100px; height: 60px;
position: relative;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
http://jsfiddle.net/jelmerdemaat/5UMxW/3/
I have a little issue.
I need to get image like bellow but can't set arrow as I want but I think that I am close :)
http://jsfiddle.net/LDhLv/
.d:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}
Try this:
CSS:
.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
content: "";
position:absolute;
width: 0;
height: 0;
}
.d:before {
top: -10px;
right: -1px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
}
.d:after {
top: -8px;
right: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
JSFiddle
I've tweaked the top/bottom left/right positioning for a more stable position, relative to the parent element. Also, I created the arrow in such a way that no rotation is necessary.
You need to use the right border and the rest is just position
.d:after {
content: "";
position:absolute;
width: 0;
height: 0;
bottom: 40px;
left:80px;
border-left: 10px solid transparent;
border-right: 10px solid #666;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
See modified JSFiddle
Change border-left: 10px solid #666 to border-left: 10px solid transparent.. and border-top: 0px solid transparent to border-top: 10px solid transparent.
To change shape of the triangle, set 0px on border-right or just remove it completely.
jsFiddle example
.d:after {
content: "\A";
position:absolute;
bottom: 50px;
left: 90px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}