I am looking for a way to make various geometric shapes using only HTML/CSS. I found my answer here, however it doesn't allows me to give borders to my shape. For instance I can get an inverted isosceles triangle using
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
It gives me this output:
However, now i can't add borders to the triangle like this:
Is there a way i can achieve what i want? Also, is it possible to give effects to it properly (like shadow effects etc.)
Note: I have a limitation of only being able to use inline CSS
Well, It's kind of messy but if the triangle is not dynamic, this should work. The idea is to place another absolutely positioned triangle with appropriate size and borders under the existing one by using :before pseudo element.
Something like this http://jsfiddle.net/84zQL/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position:relative;
}
#triangle-down:before{
content:"";
position:absolute;
top:-103px;
left:-55px;
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 110px solid blue;
z-index:-1;
}
davidwalsh.name/css-triangles
Very good article that answers exactly your question.
Potential duplicate of this post. To achieve the border trick, you may need to align two triangles with different sizes i.e. an inner one with slightly smaller borders centered above the other.
The inline example using two triangles:
<div style="
width: 0;
height: 0;
border-bottom: 110px solid blue;
border-left: 70px solid transparent;
border-right: 70px solid transparent;">
<div style="
width: 0;
height: 0;
position: absolute;
top: 6px;
left: 9px;
border-bottom: 99px solid pink;
border-left: 61px solid transparent;
border-right: 61px solid transparent;">
<div/>
<div/>
Demo: http://jsfiddle.net/haf9E/1/
If you want to make shadows, add overlaid triangles with different opacities or blurs, under or above depending on the type of shadows (inset or outset).
I tried some thing by adding an div outside the triangle .
.triangle {
width: 0px;
}
this post
Related
I am creating some CSS illustrations and I want to create a triangular shape. But, you will see that the transparent border is not actually transparent. It is of the same color as the background-color of the <div>.
.triangle {
background-color: #ff3e30;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid transparent; /* This is the culprit */
}
<div class="triangle"></div>
But, when I use a different color, it shows that the shape created should be a triangle if the border is transparent.
.triangle {
background-color: #ff3e30;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid black; /* Changed to black */
}
<div class="triangle"></div>
So, how to fix that?
The Background-color was in the way.
.triangle {
//background-color: #ff3e30;
height: 0px;
width: 0px;
border-left: 50px solid transparent;
border-bottom: 100px solid #ff3e30;
}
<div class="triangle"></div>
by default the background cover the border area. You can change this behavior using background-clip (or simply remove it like stated by #Mahmood Kiaheyrati)
.triangle {
background-color: #ff3e30;
background-clip:padding-box;
height: 0px;
width: 0px;
border-bottom: 100px solid #ff3e30;
border-left: 50px solid transparent;
}
<div class="triangle"></div>
I hope you are doing well.
Here in this link you will find some triangle shape. You can practice for better understanding that how it works.
https://css-tricks.com/the-shapes-of-css/
css for triangle-bottomleft
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
html
<div id="triangle-bottomleft"></div>
I am traying to make an angled border, I made a quick paint-ish design on what I mean or try to say :
The green is a logo,centered in the middle.
The paurple are DIV's, the white is white space.
I want the purple DIVs to have those angled edges! I have NO idea how to do this.
I searched for some angled css border but I only found shapes, but I dont understand how it works after reading :/
Anyone that can give me a hand or point me in the right direction? Thanks a Bunch!
I wouldn't try to smash the purple divs into those shapes. I would recommend an HTML setup like this:
<span class="triangle-1"></span>
<div>
<span class="triangle-2"></span>
<span class="logo"></span>
<span class="triangle-3"></span>
</div>
<span class="triangle-4"></span>
And make CSS shapes with the white triangles--a much easier task in CSS. Here's CSS for a perfectly responsive example, which may or may not be what you want:
body {
background: #652f70;
font-size: 0;
margin: 0;
text-align: center;
}
span {
display: inline-block;
}
.triangle-1 {
border-top: 40vh solid #fff;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
.triangle-2 {
border-left: 33vw solid #fff;
border-top: 10vh solid transparent;
border-bottom: 10vh solid transparent;
position: absolute;
left: 0;
}
.logo {
background: #78bd52;
height: 20vh;
width: 34vw;
}
.triangle-3 {
border-right: 33vw solid #fff;
border-top: 10vh solid transparent;
border-bottom: 10vh solid transparent;
position: absolute;
right: 0;
}
.triangle-4 {
border-bottom: 40vh solid #fff;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
And here's a JSFiddle
I want to make a trapezoid-filled picture, like this:
I do not need to rotate. I do not need to tilt the picture. transform: matrix does not work!
Solution is almost found only need to connect the two pieces of code:
background-image:url("http://3.bp.blogspot.com/-D9i-wqTIjFw/T5x_51p2rJI/AAAAAAAABLs/VytuZcJGNuY/s400/indahnya.jpg");
To this good code:
.myShape {
width: 0;
height: 50px;
border-left: 50px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
Using CSS, you can make such a shape. Try something like this:
.myShape {
width: 0;
height: 50px;
border-left: 50px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
jsFiddle Demo
The only way I know of doing that with an image is to use 3D transforms with perspective. So on your element, you'd need to give it a rotation on the y-axis:
#rectangle {
background-image: url("http://3.bp.blogspot.com/-D9i-wqTIjFw/T5x_51p2rJI/AAAAAAAABLs/VytuZcJGNuY/s400/indahnya.jpg");
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
And then give some value of perspective to a parent.
Here's a demo!
I need to create a corner block with CSS & html5.
Can somebody help me? Thanks.
update:
first of all, it should be div. I have image on my site, this is screen:
Answer:
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Are you looking to make a triangular div show up under your rectangular div? If so see this jsFiddle.
The CSS:
.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 40px solid #999;
}
The HTML:
<div class="triangle"></div>
I have a div with different colors for both the border-bottom and border-right properties.
So they are separated via a line leaving the box in a 45 degree angle.
How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?
You can do this with box-shadow.
Demo:
Output:
CSS:
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
<div id="borders"></div>
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
If we don't want the border on the upper edge, we can put border-width to 0.
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)
In order to simulate a butt joint, you can stack two divs to get a simulated result:
div {
position: absolute;
left: 0;
top: 0;
height: 100px;
width: 100px;
}
<div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
For the top border and the bottom border, you can use box-shadow:
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}
<div class="box"></div>
What you are seeing is that borders on different sides will split diagonally around the corner:
.border {
border: 10px solid;
border-top-color: forestgreen;
border-right-color: gold;
border-bottom-color: steelblue;
border-left-color: firebrick;
width: 40px;
height: 40px;
}
<div class="border"></div>
This is a behavior many use to create CSS triangles
To overcome this I can find 2 solutions: borders on a wrapper element, or linear gradients:
Option 1: Wrapper elements
.wrapper {
border-bottom: 10px solid steelblue;
height: 40px;
width: 50px;
}
.border {
border-right:10px solid gold;
height: 40px;
width: 40px;
}
<div class="wrapper">
<div class="border"></div>
</div>
Note how the wrapper element has height of 5px more then the child. This is essential for the borders to align.
Option 2: Linear Gradients
.border {
border-bottom: 10px solid;
border-right: 10px solid;
border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
height: 40px;
width: 40px;
}
<div class="border"></div>
If you're looking for square ends on your borders, you can set two of the borders to 0px and then run a dummy animation like so :
#keyframes widthSet {
to{
border-right-width: 10px; //or top and bottom, your choice
border-left-width: 10px;
}
}
with animation-fill-mode: forwards;
You can't.
For 90˚ angles you could just use colored divs.
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).