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/
Related
I'm trying to get header effect like this:
I want the dotted border along the bottom of the element, with the background the same color as the dots.
I've tried looking up how to set up a border offset but haven't found anything that works for the look I'm trying to achieve. I've tried using an outline as well, only to find that the outline property can't be specific to a single edge.
Put a div underneath the box with a border-style of dashed:
<div class="box"></div>
<div class="box-border"></div>
.box-border{
border-bottom:dashed 3px red;
}
https://jsfiddle.net/oo31w9x4/
You can use box-shadow as background.
div {
color: white;
box-shadow: inset 1000px 0px red;
border-bottom: 1px dashed red;
}
<div>the header</div>
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 below example I have two divs:
Both have the same content and almost the same style, except that the second div has one more style:
border: 1px solid black;
The problem is that this border is doing a resize of the internal content and I don't want this. I want to put a border on some divs on the page dynamically during the page load, but without chage any measures or changes in the content.
Has a way of doing this? I can use javascript if necessary, but a solution that only use css will be more apreciated.
Instead of border use outline
div.border
{
outline: 1px solid black;
}
DEMO
You can also use a transparent border, like: border: 1px solid transparent;
Then apply any other color you want.
You can use transparent borders, then when you will apply border color the size will remain the same. Here is a fiddle
html
<div>
</div>
css
div {
border:2px solid transparent;
width:200px;
height:200px;
background:#eeeeee;
margin:10px;
}
js
$("#red").on('click',function() {
$("div").css("border","2px solid red");
});
$("#transparent").on('click',function() {
$("div").css("border","2px solid transparent");
});
You have 2 options.
Use css : 1px solid transparent; and
Use css : box-sizing:border-box;
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.
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!