I have a div in HTML with some text written in it.The div is created by setting its X, Y coordinates and height and width.
I want to draw a triangle Superimposing that div so that my content is not lost.
I cannot change the X,Y coordinates as my other div's positioning is based on this div.
Generating a Triangle using multiple div's approach also does not seem feasible as I am not sure in which div I will write my text then......
Can somebody suggest an idea on how I can do this..?
You can do this with an image, but a more interesting way is to mess around with the borders of a div to make a triangle.
.triangle {
font-size: 0px;
line-height: 0%;
width: 0px;
border-bottom: 20px solid #000;
border-left: 10px solid #000;
border-right: 10px solid #000;
}
How this is works explained much more clearly here
Use this code for developing triangle:
CSS
.triangle {
width:0;
border-bottom:120px solid red;
border-left:60px solid white;
border-right:60px solid white;
}
HTML
<div class="triangle"></div>
Related
Is it possible to add a border to a box-shadow?
I want to create a class with a coloured offset with that offset being outlined in a black border.
Now I know I can create a div and offset it to get this desired look, but I want to know if it's possible to do it without so I can just create a class and add it to the divs that I want to do this too.
I attached a snippet showing the colour offset but I would like the red offset to be outlined in a black border.
.example-div{
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: -5px 5px red;
}
<div class="example-div">
</div>
You can add additional box-shadows to your div to get that effect. For your case update your box-shadow property to something like this
box-shadow: -5px 5px red,
-5px 5px 0px 3px black;
This resource has tons of more info about box-shadows and it's syntax https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow if you want to follow.
You can add a CSS pseudo-element to your class which automatically will add another object behind the main object on each element which has that class. Use absolute position, a negative z-index, 100% width and height and determine the offset with the left or right and bottom or top parameters as in this example:
(note: You need a non-transparent background for the main element when you use this method)
.example-div {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
background: #fff;
}
.example-div::after {
content: '';
position: absolute;
z-index: -1;
left: -5px;
bottom: -5px;
width: 100%;
height: 100%;
background: red;
border: 1px solid black;
}
<div class="example-div">
</div>
CSS outline and border aren't going to be much help unfortunately, as the box-shadow doesn't really exist and those will still target the element's bounding box (which is unaffected by the box-shadow).
You could make use of ::before or ::after, but that gets a little complicated for what you're trying to do.
One thing you could do is make use of multiple box-shadows. box-shadow takes a comma separated list of shadows, and it's supported in all majors browsers. The trick here would be to make use of the 4th (underutilized IMHO) parameter for box-shadow, called spread-radius. This will "spread" (expand) or "choke" (shrink) the box shadow's reference frame by that many pixels before the blur radius is applied.
In your case, for a 2px wide "border" around the box-shadow, you could do the following:
.example-div {
width: 100px;
height: 100px;
border: 1px solid black;
box-shadow: -5px 5px red, -5px 5px 0 2px blue;
}
<div class="example-div"></div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 6 years ago.
I'm trying to "cut" a div diagonally after some space. It's very difficult to explain. It should look like this:
As you cann see, there is a blue parent div in the back with a white child div inside. The white div will be the same width as the parent div, but it will be "cutted" diagonally after some pixels (e.g. after 100px). I never did something like this, but I thought it could maybe done in CSS3 using transition or rotation or something like this (I don't know, I'm not familiar with CSS3).
I searched for diagonal divs but I only got results like this. Unfortunately I know nothing to do with it. Is this even possible? Can you please give me some hints?
Use border colors to display a diagonally cut div.
Combine it with ::after to use only one div.
.background {
background-color: #5555AA;
padding-top: 15px;
}
.content {
position: relative;
background-color: white;
height: 30px;
line-height: 30px;
padding: 0 100px 0 200px;
display:inline-block;
}
.content::after {
position: absolute;
right: -50px;
content: "";
border-bottom: 25px solid white;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
}
<div class="background">
<div class="content">KONTAKT</div>
</div>
I have a menu, when the menu item is active it should have a border to the right, the issue is that the border is doesn't render correctly, please notice the bottom edge of the border.
This image shows the issue:
http://imgur.com/FC1n8qA
Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (See full screen for better view)
CSS code:
.border {
border-right:4px solid #000;
}
Thanks,
The rendering is correct.
Take a look at this:
border: 10px solid black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
Note how the borders meet at the corners. Your menu items have a thick right border and a thin bottom border. The way borders meet at the corners the thick right border looks slightly crooked at the bottom. Try and remove the bottom border and see how the right border gets straight again.
You can try nesting elements in the menu item and apply the border-bottom and border-right to different elements or use a pseudo element to fix the appearance.
As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:
Updated JSFIDDLE
.border {
position: relative;
}
.border:after {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
background: black;
content: "\00a0"; /* invisible content */
}
Borders meet at angles so you would have to use an alternative for the right border
A box-shadow would work quite well
JSfiddle Comparison (exaggerated)
HTML
<div class="border"> </div>
<div class="shadow"> </div>
CSS
.border,
.shadow {
background-color: grey;
width:100px;
height:100px;
margin-bottom: 10px;
border-bottom: 5px solid lightgrey;
}
.border{
border-right: 20px solid black;
}
.shadow {
box-shadow: 10px 0 0px 0 black;
}
I am making a divider line that runs across the bottom of my header. It needs to be two pixels tall and two-toned. The top pixel needs to be grey horizontally all the way across, the bottom needs to be white. I am tempted to just put two one pixel divs with 100% width on top of each other, but am hoping that someone knows of a better way to do this with css and maybe with an hr tag?
Thank you very much!
You should avoid the <hr /> tag because it's really inconsistent in different browsers. And honestly I haven't seen it being used for a while.
What you can do is to place a 100% wide <p> and give it a top and a bottom color - http://jsfiddle.net/zSXya/
p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;
}
The typical approach would be to use a 1-by-2 pixel image as the background to a div that will stretch horizontally across the page:
.myCustomHRule
{
width: 100%;
background-image: url(path/to/my/image.png);
background-repeat: repeat-x;
}
typically it's just the top and bottom border attributes. You can change them and then set the style to solid:
http://jsbin.com/ixuyoz/
hr{
border-top-color: red;
border-bottom-color: lime;
border-style: solid;
}
Could you use border-bottom of your header and border-top of your first TR?
If you really want to use the HR, you can set it's background to be an image.
hr
{
height:2px;
background: url(image.jpg) no-repeat;
}
<hr />
I have to agree with Zoltan with this being the best way to do it. I also haven seen an HR tag in a long time. easier done this was and will have a more consistent look across browsers
p.separator {
height: 0;
width: 100%;
border: 0;
border-top: 1px solid red;
border-bottom: 1px solid green;
}
Can I specify a border like 1px solid color1/color2. for the situation if I have to put a border like the image attached. I know I can put this border as an image, but I am looking if this can be be done in pure css.
You can also achieve the effect of multiple borders on an element with the pseude elements :before and :after.
See this page for examples http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html
Here is ja demo using this technice (only top border as you described it): http://jsfiddle.net/m7g6L/
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
Try this. Enclose the element within a div, then use the div to achieve the desired effect by eliminating the margin and border from the div, like this:
<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah
Blah Blah</p>
</div>
It worked when I tried it out.
Yes, use outline:.
Fair warning: it might mess the focus with some elements.
Example
you could use multiple elements and play with the padding and backgrounds:
http://jsfiddle.net/SJFx4/
not exactly semantic but it works -- you could use pseudo elements to achieve the same effect
Strictly speaking, CSS does not support multiple borders as far as I know.
Nonetheless, you can visually acheive the desired effect by combining an ordinary border with an outline:
#myElement {
border: solid 2px blue;
outline: solid 2px red;
}
If you need the outer "border" to appear only on one side, for example top, then the simplest solution is to use an enclosing div element:
div .borderHelper {
border-top: solid 2px red;
margin: none;
padding: 0;
}
#myElement {
border-top: solid 2px blue;
}