I have a div ( rectangle ), and inside it I want to have a triangular shape. I want to highlight that on hover. How do I do that?
I'm thinking of having 2 images with that same shape and different opacity and swapping them on hover. Would there be another way of doing this? can you have a non-rectangular shaped divs?
You Can try that:
http://jsfiddle.net/H42U7/
The css code is:
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #959595;}
.triangle-up:hover {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #123456;}
The html:
<div id="container">
<div class="triangle-up">
</div></div>
To rotate the triangle check this site:
http://css-tricks.com/examples/ShapesOfCSS/
It depends how far back in internet explorer you need to go and the context of your triangle as to what you are using it for, but assuming you don't care about internet explorer.
Chris Coyer over # CSS Tricks has a nice tutorial already setup.
http://css-tricks.com/triangle-with-shadow/
If you are planning to use it as an icon or button you might want to check out,
http://fortawesome.github.io/Font-Awesome/. Its totally free and pretty easy to implement. I have used it in a few projects and it was made for use with bootstrap.
Hope this helps.
Related
I was wondering if anyone can help me. I'm trying to change the colour of my square at the bottom of my homepage it keeps on disappearing when I attempt to change the colour. I'm trying to change it to the colour white from solid red. Why does this keep happening?
Here is my codepen
Below is my CSS coding.
.next {
position:absolute;
bottom: 40px;
left:50%;
cursor:pointer;
height: 50px;
width: 50px;
border: 4px solid red;
border-top: none;
border-left: none;
transform: translateX(-50%) rotate(45deg);
}
Kind Regards,
Liam
Based on your css the arrow shape and color is set with the border property. In this case it's the right and bottom borders of your div that are given a red border, then the div is rotated to look like an arrow pointing downwards.
Update the border color to white instead of red:
border: 4px solid white;
If you were already doing the above, check in the developer console. Sometimes codepen doesn't fully update with your changes -- reload the page to try it again.
Have you tried using specifying the color as a hex value?
border: 4px solid #ff0000; //red
In my jsFiddle I cannot get my triangle to appear correctly. It either goes above my text container or behind the background container. How do I get it to stay comfortably in the middle?
<div class="container">
<div class="firefighter-link">
Program Overview
</div>
<div class="firefighter-current-page">
Program Overview
<div class="firefighter-current-page-corner"></div>
</div>
</div>
Here is a picture of what i'm trying to do. The bottom "triangle" represents the page you are currently on.
You shouldn't be using a square and rotating it, you should be using a triangle.
Try creating a div with a 0 width and 0 height and give it an 8px border. Then, make all borders transparent except for one (in your case your top border) and you'll end up with a triangle.
EDIT:
Sorry, forgot to save my fiddle:
http://jsfiddle.net/ndudD/
div { width:0; height:0; border: 8px solid transparent; border-top-color: #000; }
As Adam says, the best practice is to use a triangle.
.triangle{
width:0;
height:0;
border-top: 50px solid blue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Very helpful screencast on css triangles:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-drawing-and-using-css-triangles/
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)
I have a div with an id of 'gallery' and I want to style the images inside it. Specifically, I want to give each of the images a 1px solid yellow border except on the bottom because they sit on top of each other, so I don't want to double the border on the bottom.
What I'm confused about is how to choose between the different border style elements: border, border-style, border-width. I tried this:
div#gallery img
{
border-width:1px;
border-style:solid;
border: solid yellow;
border: 1px 1px 0px 1px;
}
I managed to get a yellow border with this css above but the border seems more like a 2px border - it's quite thick - and, besides that, the syntax I'm using doesn't look very elegant.
Any recommendations on how to do this more concisely/elegantly?
I think this is the best way:
border: 1px solid yellow;
border-bottom: none;
The syntax for the border declaration goes width style color and affects all four borders. After that, you can override the bottom back to using no border by declaring border-bottom as none.
I don't really know if there's a wrong way to do it, but you basically have 3 methods to do it:
Method 1
border-top: 1px solid yellow;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
Method 2
border: 1px solid yellow;
border-bottom: 0;
Method 2
border: 1px solid yellow;
border-bottom: none;
I would prefer either method 2 or method 3.
(I know method 2 and method 3 are basically the same, but I wanted to give both solutions, so you can choose what you like, "none" or "0").