im trying to set this up as a div block centered in a section, not sure how to make the divs borders look like so. The top right and left corner have the crisscross effect. Was thinking maybe two divs with absolute positioning, then a div wrapping both of them with relative positioning
You could use a pseudo element for the second border:
.crisscross {
border: 1px solid #aaaaaa;
height: 50px;
position: relative;
width: 50px;
}
.crisscross:after {
border: 1px solid #aaaaaa;
content: "";
height: 100%;
margin: 5px;
position: absolute;
width: 100%;
}
<div class="crisscross"></div>
Related
I am trying to achieve white overlay that can be seen above. image behind it is a slideshow and I need to show little bit of it with that triangle cut out in the middle, I'm trying to figure out a way of how to achieve this with pseudo elements while keeping solution responsive at the same time, but cant seem to find a way. I was also thinking about using multiple backgrounds, but am not sure how to make one of them in the centre and other two on the sides.
<div id="slideshow"></div>
Above is markup for slideshow at the moment (slides appear as background images of this div, it is absolutely positioned).
Utilizing some pseudo class before and afters on the center container, you can create CSS triangles using CSS borders.
See this for CSS triangles : https://css-tricks.com/snippets/css/css-triangle/
Technically you wouldn't need to use the before/after for the containers but I used it here anyways to keep the mark-up clean.
Next using some positioning and some width calculations, I set the two containers (left and right) to width 40% which leaves me 20% to play around with for the center section.
Lastly using, vw units, I set the border-left and border-right sizes to be 10vw. This is important because it basically allows the borders to be responsive based on the viewport width as long as the slideshow is full width.
See the JSFiddle here (Updated) : https://jsfiddle.net/x117ss0q/4/
<div id="slideshow">
<div class="slideshow-overlay-wrapper">
<div class="slideshow-overlay left"></div>
<div class="slideshow-overlay-center"></div>
<div class="slideshow-overlay right"></div>
</div>
</div>
#slideshow{
background-color: #333;
position: relative;
height: 200px;
}
.slideshow-overlay-wrapper {
bottom: 0;
display: table;
left: 0;
position: absolute;
width: 100%;
table-layout: fixed;
}
.slideshow-overlay {
background-color: #fff;
display: table-cell;
height: 50px;
}
.slideshow-overlay-center {
display: table-cell;
height: 50px;
width: 200px;
position: relative;
}
.slideshow-overlay-center:after {
content: '';
left: 0;
position: absolute;
border-bottom: 0px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid #FFF;
width: 0;
height: 0;
}
.slideshow-overlay-center:before {
content: '';
right: 0;
position: absolute;
border-bottom: 0px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid #FFF;
width: 0;
height: 0;
}
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
In this jsfiddle, I'm trying to create a bookmark shape. There is only one triangle which needs to change its positioning.
<div id = "bookmark">
<div id = "rectangle"></div>
<div id = "triangle-topleft"></div>
<div id = "triangle-topright"></div>
</div>
I could easily use relative positioning and shift it, but I don't want to do it this way. I want a more malleable solution.
Instead of the shapes flowing from top to bottom. I want the last shape to flow left to right. So there are 3 shapes, the first two are in the perfect place, but the third one needs to be placed to the right of the second shape, instead of underneath it.
What CSS can I use to do this?
Add float:left; to #triangle-topleft and margin-left:100px; to #triangle-topright
#triangle-topleft {
position: static;
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
float:left;
}
#triangle-topright {
position: relative;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
margin-left:100px;
}
jsFiddle example
First of all you do not have to declare position: static; as it is already static by default (Unless you are using responsive design where you need to reset the property value at certain point of resolution), secondly, assign position: relative; to your #bookmark and make the second triangle position: absolute;
Demo
#bookmark{
width: 200px;
position: relative;
}
#rectangle {
width: 200px;
height: 300px;
background: black;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
}
#triangle-topright {
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
bottom: 0;
}
Note: Make sure you do not make your first triangle position: absolute; else you need to reposition the triangles. But this is the best method you can get, as you've wrapped absolute inside a relative container.
You can also take a look at this awesome thing - Font Awesome - Bookmark, you can resize this to whatever size you want to.
The thing you are trying can be also achieved by using :before and :after pseudo along with content property. So you can get rid of the extra triangle elements.
As I said, you can create this thing with a single element.
#bookmark{
width: 200px;
position: relative;
height: 300px;
background: black;
}
#bookmark:before {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
display: block;
content: "";
position: absolute;
bottom: -100px;
}
#bookmark:after {
position: absolute;
right: 0;
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
bottom: -100px;
display: block;
content: "";
}
Here, am using :before and :after pseudo, with display: block; and content: ""; which are essential to get this thing work, also am positioning both the elements using absolute with a value set to -100
Demo (Using single element)
Note: :before and :after pseudo can fail in older versions of IE,
but you can always use polyfills to use CSS 3 properties, also, for
more information on browser support, you can check this out.
You can just add float: left to #triangle-topleft and margin-left: 100px to #triangle-topright.
To remove unnecessary markup, you could also use :before and :after pseudo-elements instead of #triangle-*.
Add display:inline-block to both triangle shapes. They're stacking because they are defaulting to display:block.
It suffices to just add float:left to #triangle-topleft and #triangle-topright.
See the fiddle: http://jsfiddle.net/nfxYE/
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.