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;
}
Related
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 want to increase the width & height of the svg slope.
Here is my code.
[https://codepen.io/hetal001/pen/pZWRYz][1]
if you write this code you must know how to make this shape bigger
but for this arrow I suggest to use this code :
div {
margin-top:20px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
it's very simple to customize
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
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;
}`
Like it's said in title, does someone know the trick to make the triangles with CSS2 (not CSS3) without using images ?
A little request on a good website will give your answer :
http://css-tricks.com/snippets/css/css-triangle/
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>