How can I make this bottom div into a triangle like shown in the image? I tried the code below but the edges don't come into the center.
border-radius: 0 0px 100px 100px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
Try this:
HTML
<div class="triangle">
<!--Div content here -->
</div>
CSS
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px 175px 0 175px;
border-color: #007bff transparent transparent transparent;
}
See DEMO here:
TRIANGLE DOWN
http://jsfiddle.net/EdZ32/6/
TRIANGLE UP
http://jsfiddle.net/EdZ32/5/
Triangle Generator here:
http://html-generator.weebly.com/css-triangle-generator.html
use the CSS below to achieve the triangle styling.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Related
Is it able to create a button with transparent background and a dotted border, with a custom shape?
I'm able now to do this with a background color, but when I try to to fill the inner without any color, nothing works as expected.
body{
background: #999
}
button {
height: 50px;
width: 250px;
border: dotted 1px #FFF;
border-bottom: none;
background: none;
position: relative;
}
button:after,
button:before {
content: '';
display: block;
position: absolute;
top: 100%;
width: 0;
height: 0;
border-style: solid;
}
button:after {
border-color: #fff transparent transparent transparent;
border-width: 1px 125px 0 0;
right: 1px
}
button:before {
border-color: transparent transparent #fff transparent;
border-width: 0 125px 1px 0;
left: 0
}
<body>
<button></button>
</body>
I am not so sure about a button, but you can certainly create shapes out of divs.
What you are looking for is a play with borders to create shapes.
#triangle{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid green;
}
<div id="triangle"></div>
As you can see, I created a triangle with just the borders, the trick is to understand the borders of a div. They are not straight, their ends are wedge shaped.
I think this is a good starting point for you.
I am trying to create a border like effect for the triangle. I have tried giving it a border, box shadow, neither works. Then if you do put another triangle div inside of it the outer triangle just becomes larger.
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
}
Try using a pseudo-element like :after.
Here you go!
#triangle {
border-style: solid;
border-width: 25px 50px 25px 0;
border-color: transparent #000 transparent transparent;
width: 0;
position: relative;
}
#triangle:after {
content: ' ';
position: absolute;
border-style: solid;
border-width: 13px 25px 13px 0;
border-color: transparent red transparent transparent;
width: 0;
top: -13px;
left: 17px;
}
<div id="triangle">
</div>
I'm trying to style a double border and to give each double border their own colors. I'm only styling each side (border-left & border-right).
I've been looking and couldn't find an article about adding individual colours to each border of a double-border
border-color: #cbcccd;
border-style: solid;
border-width: 0px 1px 0px 1px
There are some articles on using box-shadow but none that covers when you only want it to apply to the side borders. If someone has a solution, or something better you,re help would be appreciated!
Multiple boxshadows will work quite well here
JSfiddle Demo
CSS
div {
border-color: grey;
border-style: solid;
border-width: 0px 1px 0px 1px;
height:100px;
width:100px;
margin:25px auto;
box-shadow:-2px 0 0 0 red,
2px 0 0 0 green;
}
This might work: Put whatever you are trying to add a border to inside a div and then add a border to the div and style them each separate. for example: HTML: <div><table></table></div> CSS: table{border-color: green}
div{border-color: purple}
You can use :before pseudo element and add another border to that.
Example CSS:
.foo{
width: 100px;
height: 100px;
border-style: solid;
border-width: 0px 5px 0px 5px;
border-right-color: orange;
border-left-color: red;
position: relative
}
.foo:before{
content: "";
border-style: solid;
border-width: 0px 5px 0px 5px;
border-right-color: green;
border-left-color: blue;
position: absolute;
width: 100%;
height: 100%;
}
DEMO
check this out
http://codepen.io/anon/pen/jfIil/
css code
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-right: 1px solid #DEDEE0;
border-bottom: 1px solid #DEDEE0;
border-left: 1px solid #DEDEE0;
border-top: 3px solid #73A784;
}
you see the top-left and top-right corners ? why is it like this ? and how can I fix it ?
I'm talking about the the top border get "cutted" in the corners ...
thanks!!
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
This will set different widths, border-color and border-style for each of the four borders.
In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.
Checkout the fiddle here to understand better
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
Solution here
css
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-left: 20px solid black;
border-right: 20px solid black;
box-shadow: 0px -20px 0 0 red;
height: 150px;
width: 150px;
}
I am trying to round in the bottom border of a div. Is it possible to do with css? I know you can round in corners with:
border-bottom-left-radius: 50px;
I guess I am trying to achieve the inverse of this.
Any help would greatly be appreciated.
Thanks
Sure it's "possible". Overlay divs.
http://jsfiddle.net/jprGx/3/
.outer {
width: 50px;
height: 50px;
position: relative;
border: #000 1px solid;
}
.inner {
position:absolute;
background: #fff;
height: 20px;
width: 50px;
bottom: -1px;
left: -1px;
border-left: #000 1px solid;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.round{
border-radius: 0px 0px -50px -50px;
}
A more simple and easier way to do this would to implicitly code by:
.round{
border-radius: 0px 0px 50px 50px;
}
Border-radius: 0px (top left corner) 0px (top right corner) 50px (bottom left corner) 50px (bottom right corner)