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;
}
Related
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>
I'd like to set a margin all around a <div> with a position:absolute inside a scrollable <div> to let some free space between the inside div and the scrollable area boundaries (right and bottom).
I tried something like this but with no luck:
<div style="overflow:scroll">
<div style="position:absolute; margin-right:100px; margin-bottom:100px">DRAG ME</div>
</div>
Demo here: https://jsfiddle.net/ayft01x0/
Only the margin-bottom works, and only in Chrome.
You can also imagine that there are other elements inside the scollable div and that they should stay clickable even if they are masked by the margin of the "drag me" element (which should be the case when using CSS margins).
I'm looking preferably for a CSS-only solution that works in Webkit browsers.
Any ideas?
Absolute positioning changes the way margins work, but you can get the effect you're after with borders:
We add a border to the left and the right. This interferes with the border you already had on the draggable element, so we add a pseudoelement to take care of the design. The pseudoelement covers up the "drag me" text, so we add a wrapper around that content and fix the z indices
Here's an update to your fiddle, and here's a snippet of the essential css
#container {
position: relative;
width: 200px;
height: 200px;
border: solid 1px black;
background-color: white;
}
#box {
position: absolute;
border-right: 100px solid transparent; /* changed this */
border-bottom: 100px solid transparent; /* changed this */
outline: 1px solid red; /* just for demo purposes */
width: 80px;
height: 80px;
left: 50px;
top: 50px;
/* dropped the border and background styles */
}
#box span { /* added this element */
position: relative;
z-index: 1;
}
#box:before { /* added this element */
content: '';
position: absolute;
z-index: 0;
width: 80px;
height: 80px;
/* placement adjusted to take the border into account */
left: -2px;
top: -2px;
/* border and background styles moved from #box to here */
border: solid 2px #666;
border-radius: 10px;
background: #ccc; /* shaved off a couple bytes by dropping the -color */
}
<div id="container" style="overflow:scroll">
<div id="box">
<span>DRAG ME</span><!-- added this wrapping element so that it can get a z-index -->
</div>
</div>
Note that I've kept your initial positions for the draggable box, but I would probably actually do it like this. The negative margins are just half the element's dimensions. This way if you tweak the size of #container you don't have to recalculate #box's starting position
#box {
...
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
There is a workaround by using an encapsulating div with inner padding and make it transparent to the mouse interactions using the pointer-events property.
<div style="overflow:scroll">
<div style="position:absolute; padding-right:100px; padding-bottom:100px; pointer-events:none">
<div style="pointer-events:all">DRAG ME</div>
</div>
</div>
Demo here: https://jsfiddle.net/1axtonez/
The easiest way to achieve this is to create an invisible CSS ::before pseudo-element that covers the box plus a padding, and to make it transparent to the mouse interactions using the pointer-events property:
div.box::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-right: 100px;
padding-bottom: 100px;
pointer-events: none;
/* background-color: rgba(255,0,0,0.2); // to understand what is going on */
}
Demo here: https://jsfiddle.net/rmxwwyno/
Be warned that it's not working when the box has an overflow property that is not set to visible.
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.
I found various examples of how to create triangles using CSS (like this one); all of them are based on creating a 0-sized box and fiddling with borders to create the triangle shape. Ok, very nice.
But how can I actually place something inside such a triangle?
You can use positioning techniques to place some content over the triangle and not under the triangle..
I emphasized over and under because using positioning am positioning the text over the triangle, so triangle element isn't the parent of the content, as to create triangles we use height: 0; and width: 0; so you need to overlay the text.
Just make sure you use position: relative; for parent element holding absolute positioned element.
Didn't used z-index but you can use that to play safe with the stacking order.
Demo
<div class="wrap">
<div class="triangle"></div>
<span>Hello</span>
</div>
div.wrap {
position: relative;
}
div.triangle {
height: 0;
width: 0;
border: 50px solid #f00;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
div span {
position: absolute;
left: 35px;
bottom: 0;
}
This way can be sloppy but it would work for a basic situation.
http://jsfiddle.net/Yc5nF/1/
<div class="arrow-right">
<p>Foobar</p>
</div>
.arrow-right {
position: relative;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-bottom: 150px solid green;
border-right: 150px solid transparent;
}
.arrow-right p {
position: absolute;
top: 70px;
left: -20px;
}
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/