I'm trying to add a triangle before a div using css, but it ends up under it.
http://jsfiddle.net/lasseedsvik/LwE7u/
HTML
<div id="container">
1234
<div id="toolbar">
Want silly triangle before this div to left
</div>
</div>
CSS
#container {
width: 500px;
}
#toolbar:before
{
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
}
Is there something missing like display: inline or something?
Use CSS Positioning to set the triangle correctly, in the example below, I am using position: relative; on the parent element, and than use position: absolute; for the :before pseudo..and than use left property which is dobule of the elements width
Always you should wrap the absolute positioned elements with a relative positioned containers, else your element will fly out in the wild.
Demo
#container {
width: 500px;
}
#toolbar:before {
position: absolute;
left: -88px; /* Double the element size */
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
position: relative;
}
Note: Generally when you are creating triangles using CSS, it's a
common practice to set the elements height and width to 0 so if
you want, just tweak them up.
Try putting your div#toolbar in position:relative and positionning your pseudo-element in an absolute manner. Then adjust position and margins to position it correctly.
http://jsfiddle.net/LwE7u/2/
Related
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
I have a set of divs that vary in size depending on an image inside it. Inside each div I would like two more divs, one is floated left and the other is floated right, like so:
I sort of accomplished it this way ... html:
<div class="image-wrap">
<img src="{{ img }}">
<div class="lookbook-title"><h5 >{{ title }}</h5></div>
<div class="item-buy">{{ theme:partial src="_buynow" }}</div>
</div>
and css:
div.image-wrap {
max-height: 1000px;
max-width: 100%;
border: 0;
display: inline-block;
height: auto;
box-sizing: border-box;
}
.lookbook-title {
position: relative;
top: -36px;
float: left;
padding-left: 10px;
padding-right: 10px;
color: #f7f7f7;
}
.item-buy {
position: relative;
top: -56px;
float: right;
padding-right: 20px;
pointer-events: none;
-webkit-font-smoothing: antialiased;
fill: #f7f7f7;
}
The reason I say "sort of" is because it initially was working just fine, but now the floated divs are appearing on above and outside their parent divs. What is interesting is that if I inspect the problem with dev tools and uncheck and recheck the "float" on either div both go back to where I want them to go...
You need to clear your floats.
Here is a interesting article that explains it in detail: http://css-tricks.com/snippets/css/clear-fix/
Hope this helps.
You should use position: absolute; for your 'floating' elements instead of float.
You'll need to add position: relative; to the parent wrap element - this will tell the children to respect the bounds of this element instead of floating somewhere outside of it. Then you can add position: absolute; to each of the children that you want to float and use top, bottom, left, right to control where the box is positioned. Experiment with different values to get the hang of it.
div.image-wrap {
height: 300px;
width: 400px;
position: relative;
border: 1px solid red;
}
.lookbook-title,
.item-buy {
background: white;
position: absolute;
bottom: 10px;
height: 100px;
width: 100px;
}
.lookbook-title {
border: 1px solid lime;
left: 10px;
}
.item-buy {
border: 1px solid blue;
right: 10px;
}
<div class="image-wrap">
<img src="http://www.placehold.it/400x300.jpg">
<div class="lookbook-title"><h5>Div 1</h5></div>
<div class="item-buy">Div 2</div>
</div>
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I am trying to get this done in HTML and CSS. I am able to get the box done using the border and padding. But how do I get the line above?
Here is what I have so far:
.november {
padding: 1%;
border: 2px solid #000;
}
<div class="november">November 2014</div>
Pseudo element goodness
The HTML
It's a one liner:
<div>November 2014</div>
The CSS
The vertical line is created with a :before pseudo element:
The :before pseudo element is given position: absolute
left: 50% shifts the line to the middle and bottom: 100% pops the line above the div
The line is created by the 2px width
margin-left: -2px shifts the line 2px to the left to correctly offset its position (this is equal to the width)
The div is made position: relative and the position: absolute :before will position itself in relation to it. Space above the div is created with the top margin.
Complete Example
In this example, display: inline-block allows the div to expand and retract with its contents.
div {
padding: 10px;
border: solid 2px #000;
display: inline-block;
position: relative;
margin-top: 50px;
}
div:before {
content: '';
width: 2px;
height: 50px;
background: #000;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -2px;
}
<div>November 2014</div>
I tried this and got it right:
body {
background: #EEE;
}
.november {
margin: 0;
padding: 1%;
border: 2px solid white;
clear: both;
}
<div class="col-sm-2">
<hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
<div class="november">November 2014</div>
</div>
How can I make the following shape in CSS3, without using pseudo-classes like ":before"?
I did it very easy with :before, but the thing is that I don't want to have a solid element on the gray area (see JSFiddle - http://jsfiddle.net/aUdLr/2/)
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 100%;
position: relative;
}
div:before{
content: "";
width: 100%;
height: 110%;
background: gray;
position: absolute;
left: 5px;
top: -5%;
border-radius: 100%;
}
You can use border width:
div{
width: 100px;
height: 100px;
border-radius: 100%;
border-width: 0;
border-left:solid 10px red;
}
Scientifically inaccurate example: http://jsfiddle.net/aUdLr/4/
Keep in mind that the outer shape is not a perfect circle, because the border is added to the width. You can compensate by reducing the width, or by using Box-sizing: Border-box.
To get the effect of a small circle eclipsed by a larger circle, you can add a shadow to a transparent element:
div{
width: 100px;
height: 100px;
border-radius: 100%;
background-color:transparent;
box-shadow: -23px 0 0px -15px #ff8;
}
Example: http://jsfiddle.net/aUdLr/6/
Simplest CSS3 solution that comes to my mind:
div:before {
font: 80px serif;
color: red;
content: "(";
}
Here's a fiddle.
(Now seriously- if you want a good amount of control over the shape, I suggest to use SVG.)