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
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>
So I have the following two triangles:
The points are cut off, but my code is literally just this:
.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}
.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}
And as you can see in this JSFiddle, it actually DOESN'T cut the edges off when rendering these triangles in a JSFiddle.
All in all this could not be a more standard way of creating a pure CSS triangle and has worked for me many, many times. Anyone have any idea what could be causing this strange behavior? Thanks.
EDIT: By the way, confirmed to behave the same way in IE and Chrome, both latest versions.
OMG I just figured this out by going through my page and deleting each CSS rule line-by-line. Apparently the problem was caused by the following rule:
div.navUpper * {
padding-top: 4px;
}
'.navUpper' is the container my carets were in. The '*' selector was applying 4px padding to them -- the effects of which can be seen here: https://jsfiddle.net/6f4yxp4e/8/
Thanks again to those who responded -- you were both right in different ways.
The triangle is only pointy when the border stretches all the way to the center, meaning anything altering the content box has to be 0 - this includes width/height and padding. Check for other css rules that overwrite your height: 0; or add some padding.
.navCaret {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
outline: 1px solid red; /*for illustration purposes only*/
}
.navCaretOL {
height: 0;
width: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
white-space: nowrap; /*for illustration purposes only*/
outline: 1px solid red; /*for illustration purposes only*/
}
<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have got an image. Recently I have used image for this. But I think css shape will be more good then using this shape. So can someone kindly tell me how to get this shape only in css. I don't want to use image here. Any help and suggestions will be really appreciable. Thanks...
The image is here
Created this using only HTML and CSS. DEMO
Inspiration from
http://css-tricks.com/examples/ShapesOfCSS/
HTML
<div>
<div id="triangle-topleft"></div>
<div id="triangle-topright"></div>
</div>
CSS
div{
float:left;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 80px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
margin-left:-5px;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
FIDDLE
Markup is <div></div>
css
div:before
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 40px 0 0;
border-color: #63071e transparent transparent transparent;
}
div:after
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 40px 20px 0;
border-color: transparent #63071e transparent transparent;
margin-left: -6px;
}
.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}
FIDDLE DEMO
Was this googled??
Please see the following Link:
http://www.howtocreate.co.uk/tutorials/css/slopes
or atleast refer question asked here
Cut Corners using CSS
<style>
.triangle { width:0px;
border-bottom: 30px solid transparent;
border-left: 60px solid #FF0000;
border-right: 60px solid #FF0000;
border-top: 0; }
</style>
<div class="triangle"></div>
Demo here http://jsfiddle.net/EfxEj/
below is the basic idea. how to do it. however you can play with positioning or markup.
HTML
<div>
<span></span>
</div>
CSS
div {
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
border-top: 20px solid #f00;
position:relative;
}
span {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 0 solid transparent;
border-top: 20px solid #f00;
position:absolute;
top:-20px;
left:50px;
}
I am very new to stackover flow so will take sometime to adjust to its editor so please overlook my way of presenting the answer.
CSS :
tri1{width: 0px;height: 0px;border-style: solid;border-width: 200px 200px 0 0;border-color: #007bff transparent transparent; }
tri2{padding-right:200px;margin-top:-200px;width: 0px;height:
0px;border-style: solid;border-width: 0 200px 200px 0;border-color:
transparent #007bff transparent transparent; }
now fix the height and width as per ur needs.
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>