How do I vertically align these css triangles to the text? - html

div {
margin: 10px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
vertical-align: top;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow-up"></span> An up arrow
</div>
<div>
<span class="arrow-down"></span> A down arrow
</div>
https://jsfiddle.net/dL1od5tz/8/
I would like to align them so that the bottom of the arrow is aligned with the bottom of the text. The vertical-align doesn't seem to do anything and setting margins and padding doesn't do the trick either. I am out of ideas. Thanks!


How about making them each inline-block?
div {
margin: 10px;
}
.arrow {
display: inline-block;
}
.up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow up"></span>
<span>An up arrow</span>
</div>
<div>
<span class="arrow down"></span>
<span>A down arrow</span>
</div>

Related

how to set height of svg slope? here is my code

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

add 2 :before's :after's on same div to create 2 triangles

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.

Css Shape with before and after

I am trying to do this shape with css3:
Is it possible with css3 or good idea to keep it as a background image. If I make it with background images, is there any problem with making it responsive?
I tried with before and after elements, but couldn't get it working:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
#shape2 {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
position: relative;
}
#shape2 h2 {
text-align: center;
background: #ffde00;
padding: 20px;
margin: 0px 0px 0px 0px;
border-radius: 5px 0px 0px 5px;
}
.title {
position: absolute;
top: 200px;
left: 90px;
color: #fff;
}
<div id="shape"></div>
</br>
<div id="shape2"></div>
<div class="title">
<h2> New Title ,</h2>
</div>

Here is a sample of how to do this shape with CSS3:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
<div id="shape"></div>
Regards

How to use :after to rotate arrow as I want

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;
}

Is there a way to create the pure CSS2 cross-browser triangles?

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>