I'm using bootstrap, trying to make a div have a CSS triangle before it.
http://jsfiddle.net/B2XvZ/11/
Here is my non-working code:
.d:before {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #dd4397 transparent transparent;
}
The way I'd like it to look is for there to be a pink left-pointing triangle right before the text "this", with no gap between it and the div. I've tried to do this by floating the elements also, with no success.
You need to specify the content property.
For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left.
jsFiddle example
.d {
position:relative;
}
.d:before {
content:"\A";
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #dd4397 transparent transparent;
position: absolute;
left: -15px;
}
You need content property and some other
.d:before {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #dd4397 transparent transparent;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
a:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0px 15px;
border-color: #fff transparent transparent transparent;
display: inline-block;
vertical-align: middle;
position: absolute;
bottom: -13px;
left: 0;
right: 0;
margin: 0 auto;
}
You can use UTF-8 Geometric Shapes.
a:before {
content: '\25B2'
}
in your HTML need a meta charset:
<html>
<head>
<meta charset="utf-8" />
...
</head>
</html>
Geometric shapes list:
https://www.w3schools.com/charsets/ref_utf_geometric.asp
Related
I have created a ribbon with css only. Now i want to make a 1px grey border around it. But the left and right side of the image are created already with a css border. is this possible to do that?
The image should look like this (you see the 1 px grey border):
This is the html and css i use to create the image:
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
}
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
}
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>
You can simplify you code by using skew transformation then you can easily adjust border:
.yellow-ribbon {
width: 120px;
height: 30px;
margin:20px;
background-color: #eedc08;
border:1px solid #000;
transform:skew(-30deg);
}
<div class="yellow-ribbon">
</div>
By the way if you want to keep your actual code you can rely on pseudo-element like this (but i don't recommend this solution as it makes the code even more complicated and we have above a simple one):
.yellow-ribbon-top-left {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #eedc08 transparent transparent transparent;
float: left;
position: relative;
top: 1px;
}
/* create border around the left part */
.yellow-ribbon-top-left:before {
content: "";
position: absolute;
border-style: solid;
border-width: 32px 32px 0 0;
border-color: #000 transparent transparent transparent;
bottom: -1px;
z-index:-1
}
/* */
.yellow-ribbon-mid {
width: 120px;
height: 30px;
float: left;
background-color: #eedc08;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
}
.yellow-ribbon-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 30px;
float: left;
border-color: transparent transparent #eedc08 transparent;
position:relative;
top:1px;
}
/* create border around the right part */
.yellow-ribbon-bottom-right:before {
content: "";
position: absolute;
border-style: solid;
border-width: 0 0 32px 32px;
border-color: transparent transparent #000 transparent;
top: -1px;
right: 0;
z-index:-1
}
/* */
<div class="yellow-ribbon-bottom-right"></div>
<div class="yellow-ribbon-mid"></div>
<div class="yellow-ribbon-top-left"></div>
I want to create pentagon which is pointing downward (reverse). But I don't how to mentions points.
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
<div id="pentagon"></div>
TL;DR: (Solution)
The simplest way to invert that pentagon would be to invert the borders that are used in creating it like in the below snippet:
#pentagon {
margin: 0px 0 5px 20px;
position: relative;
width: 110px;
border-width: 0px 36px 100px;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: 100px;
left: -36px;
border-width: 70px 90px 0px;
border-style: solid;
border-color: #abefcd transparent transparent;
}
<div id="pentagon"></div>
How is the pentagon shape in question created?
The pentagon shape that you have shown in question is created as follows:
The main element has a border-top of 100px whose color is #abefcd, it has border-left and border-right as 36px but they are transparent. This produces a trapezoid which is wider at the top and shorter at the bottom.
The pseudo element has a border-bottom of 70px whose color is #abefcd, it has border-left and border-right as 90px but they are transparent. This produces a triangular shape which is then placed on top of the main element using absolute positioning.
Both these together produce the pentagon. I have changed the border colors in the below snippet so that you can see it visually.
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent blue;
}
<div id='pentagon'></div>
How do I invert it?
It is very simple to do once we have the understanding of how the shape is created.
Change the trapezoid such that the bottom is wider than the top. That is, make border-bottom as 100px and set its color as #abefcd. Change border-top to 0px. The color of border-top doesn't matter because it is anyway 0px wide.
Similarly for the triangular part, set the border-top as 70px and its color as #abefcd. Change the border-bottom to 0px. This will make the triangle point down.
Adjust the top value such that the triangle (pseudo-element) is below the trapezoid (which is 100px tall).
An alternative would be just to keep the same code but add rotate the pentagon using a transform like so.
#pentagon {
margin: 70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
transform: rotate(180deg);
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
<div id="pentagon"></div>
Just inverse your div content by adding few new styles as mentioned below. Rest HTML/CSS keep as it is of yours.
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
<div id="pentagon"></div>
Can anyone give me any ideas how to achieve a html input that has pointed edge on it.
Something like this:
from:
________
|________|
To:
_______
<_______>
Below are my contributions to adaam's work. I have the right arrow now fitting on the right side of the input box and aligned them a bit better.
HTML:
<div class="sharp"><input type="text" value="test"/></div>
CSS:
input[type="text"] {
width: 140px;
}
div.sharp {
height:30px;
width:133px;
position:relative;
margin:0 30px;
}
div.sharp:before {
content: "";
position: absolute;
top: 1px;
left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 0;
border-color: transparent #000 transparent transparent;
line-height: 0px;
_border-color: #000000 #000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div.sharp:after {
content:"";
position: absolute;
top: 1px;
right: -30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #000;
line-height: 0px;
_border-color: #000000 #000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
http://jsfiddle.net/P89WD/9/
You could try something like this. Put a div on either side of the input box and form it into a triangle.
I have achieved it through multiple images in input
input.yourClassname {
border-bottom: 1px solid #7e8ba4;
background-image: url(../css/images/inputBorderLeft.png), url(../css/images/inputBorderLeft.png);
background-repeat: no-repeat;
background-position: bottom left, bottom right;
}
So assuming I have the below triangle. Without adding any html or tags how could I go about positioning the text into the center of the triangle?
Fiddle: http://jsfiddle.net/3LXaD/
You will notice the white text in the top right corner of the triangle. I understand a triangle is a large border around the shape. Is this even possible?
CSS
div:nth-of-type(1) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div {
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
HTML
<div>This is a triangle</div>
Without extra markup try this:
div:nth-of-type(1):before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
position: absolute;
top: 0;
z-index: -1;
left: 50%;
margin-left: -150px;
}
div {
font-size: 16px;
color: #ffffff;
text-align: center;
line-height: 130px;
position: relative;
}
Here is an example.
Ciao
Ralf
Wrap the text in the span and position it absolutely:
JSfiddle
span{
position: absolute;
top: 80px;
left: 33%;
}
<div><span>This is a triangle</span></div>
Here would be the solution if you were to use a pseuedo element. (not best practice)
div:after{
content: 'This is a triangle';
color: white;
position: absolute;
top: 80px;
left: 33%;
}
Does anyone know how to make edgy corners like in the following below? See how the edge wraps around the corner. I would like to know the term as well (if any). cross browser support (IE8 and up, bonus IE7) is a must. Thanks for any help.
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want.
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
JS Fiddle Example
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(DEMO)
I don't think IE 7/8 support the ::before pseudo-element, so if you want IE compatibility add another element and put ::before styles on it :)
That edgy corner is only a div with a triangle actually, you only need ONE element to do it.
<div id="myCorner"></div>
myCorner will be the div, and myCorner:after will be the triangle.
Check it out : http://jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}