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!
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 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
I am trying to use the following arrow :
As a baseline for some boxes.
I would like to use it as a responsive arrow (At the moment it is a .png) Is there a way to make this in pure CSS or even use jQuery and make it responsive?. I imagine I may have to split it into seperate spans to create the effect?
Thanks in advance.
Take a look at CSS3 Shapes. You can use them to create the triangle in your CSS, e.g:
#triangle-down {
width: 0;
height: 0;
border-left: 320px solid transparent;
border-right: 320px solid transparent;
border-top: 200px solid red;
}
You can alter the border sizes to achieve the triangle you are after.
To make it responsive you can use media queries, e.g:
#media all and (max-width : 800px) {
#triangle-down {
width: 0;
height: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-top: 100px solid blue;
}
}
DEMO: http://jsfiddle.net/VY7vh/6/
Responsive, 1 div.
HTML
<div class="triangle"></div>
CSS
.triangle {
width: 25%;
padding: 25% 0 0 25%;
}
.triangle:after {
content: "";
display: block;
width: 0; height: 0;
margin: -250px 0 0 -250px;
border-top: 250px solid black;
border-right: 250px solid transparent;
border-left: 250px solid transparent;
}
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>