This is a follow-up to his question: Center triangle at bottom of div full width responsively
Again I'm stuck with my CSS for a project involving divs with triangle borders at the bottom:
I want a row of cascading divs to look like this (lower tringle colored red for demonstration purposes):
My code now looks like this:
html, body {
padding: 0; margin: 0;
color: white;
}
.top {
background-color: #282C34;
height: 500px;
width: 100%;
position: relative;
}
.bottom {
background-color: #3B3E48;
height: 500px;
width: 100%;
}
.triangle {
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
width: 0;
height: 0;
bottom: -40px;
content: "";
display: block;
position: absolute;
overflow: hidden;
left:0;right:0;
margin:auto;
}
.upperTriangle {
border-top: 40px solid #282C34;
}
.lowerTriangle {
border-top: 40px solid red;
}
<div class="top">
<div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
<div class="triangle lowerTriangle"></div>
</div>
<div class="top">
<div class="triangle"></div>
</div>
Code on JSFiddle: http://jsfiddle.net/rndwz681/
My problems:
I can't figure out how to align the triangles correctly on the z axis.
I can't figure out how to align the triangles correctly with the divs apart from the first one.
Thanks a lot in advance for the help.
Powered by CSS triangle generator
.container {
width: 100%;
overflow: hidden;
}
.block {
width: 100%;
height: 200px;
}
.block--arrow {
position: relative;
}
.block--arrow:before {
display: block;
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -350px;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 350px 0 350px;
}
.grey {
background: #626262;
}
.light-grey {
background: #999999;
}
.light-grey:before {
border-color: #626262 transparent transparent transparent;
}
.black {
background: #000000;
}
.black:before {
border-color: #999999 transparent transparent transparent;
}
<div class="container">
<div class="grey block"></div>
<div class="light-grey block block--arrow"></div>
<div class="black block block--arrow"></div>
</div>
By adding position:relative; to your .bottom class and adding z-index:100; to your .triangle class I was able to get your triangles to appear the way you want them to.
See my fiddle: http://jsfiddle.net/rndwz681/1/
z-index sets the "layer" that an object appears on (higher number = closer to the user). It can only be applied to 'positioned' elements, but your absolute-positioned triangles qualify.
Related
im trying to build a ui with html.
The navbar should stay at the top
Some video below the navbar and the other content should scroll on the video( for now it is brown box) .
The sky blue box(which is for side navigation) should stop right below the nav box and pink box(content box) should continue scrolling.
issues :
the sticky nav box scrolls up after some scrolling and
the sky blue box doesn't stop below nav box.
please see the codepen and help me out....
html
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.container {
display: flex;
position: relative;
top: 400px;
border-top: 4px solid black;
}
.box1 {
/* height:500px; */
position: sticky;
top: 50px;
width: 40%;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1000;
height: 50px;
}
.image-con {
position: fixed;
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
z-index: -1000;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
https://codepen.io/mbs-yaswanth/pen/yZOLXQ
Remove
body,html{
height: 100%;
}
Once your sticky nav is hitting the bottom of your html and body it is not sticky anymore. It seems to move back up the page but its really just not following you through the overflow. Hope this helps.
EDIT
I think this is what you are looking for I changed a good bit of your code so just review it carefully. for some reason when you run the snippet box 2 gets smaller but it works in full page preview. Hope this helps
body,
html {
width: 100%;
margin: 0;
}
.box1 {
height:500px;
position: sticky;
top: 50px;
width: 39%;
vertical-align: top;
display: inline-block;
background-color: aqua;
border: 2px solid grey;
}
.box2 {
display: inline-block;
height: 1000px;
width: 60%;
background-color: pink;
}
.nav {
position: sticky;
top: 0;
background-color: blue;
z-index: 1;
height: 50px;
}
.image-con {
background-color: brown;
border: 2px solid yellow;
height: 500px;
width: 100%;
}
<div class="nav"></div>
<div class="image-con"></div>
<div class="box1"></div>
<div class="box2"></div>
There are a few answers out there about how to skew the single side of a div both empty and with images:
CSS3 Transform Skew One Side
Skew one side only of an element
But using these answers, I cannot figure out the rest of my issue.
I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.
I am using Foundation 6 as the primary framework behind my site.
I have attached an image of how it should look completed
The closest I have got so far is this:
I have posted the code I have so far below.
Codepen
HTML:
<section class="lan_primary">
<div class="container-full">
<div class="row wide">
<div class="columns small-12 medium-6 lan_primary--select">
CONTENT LEFT
</div>
<div class="columns small-12 medium-6 lan_primary--img">
CONTENT
</div>
</div>
</div>
</section>
CSS:
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
}
&--img {
background-color: blue;
transform-origin: top left;
transform: skew(-20deg);
//margin-left: 80px;
}
}
UPDATE - from first answer
Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;.
See image below:
Use the triangle border trick with a pseudo. With viewport units it will scale with the height
To make the skew centered, I sized the right 25px (half of the skewed
area) wider than the left.
html, body {
margin: 0;
}
.wrapper {
display: flex;
}
.left, .right {
height: 100vh;
}
.left {
flex-basis: calc(50% - 25px);
position: relative;
background: lightgray;
display: flex;
align-items: center;
}
.left::after {
content: '';
position: absolute;
top: 0;
left: 100%;
height: 0;
width: 0;
border-top: 100vh solid lightgray;
border-right: 50px solid transparent;
}
.right {
flex-basis: calc(50% + 25px);
background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
background-size: cover;
}
<div class="wrapper">
<div class="left">
<h1>Some text</h1>
</div>
<div class="right"></div>
</div>
You can Make use of the pseudo elements to make the look skewed one side
CSS(SCSS)
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
position: relative;
overflow:visible;
&::after{
content:"";
position: absolute;
z-index:1;
top:0;
bottom:0;
height:100%;
width:20%;
background-color: cyan;
right:-40px;
transform:skew(-20deg);
}
}
&--img {
background-color: blue;
transform-origin: top left;
//margin-left: 80px;
}
}
link for reference
hope this helps
I'm trying to create a translucent responsive triangle with only one side of it's border colored in a div
I found a way online that uses 2 triangles and placing them on top of one another but the problem is I would like the triangles to be translucent so the background image of the div can be seen
Something like this: http://i.imgur.com/ZxHc3jV.jpg
Thanks alot for your help and any help would be much appreciated!
.container {
width: 33.33%;
height: 500px;
background: blue;
overflow: hidden;
position: relative;
}
.triangle {
width: 100%;
height: 0;
padding-top:100%;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
.triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
border-right: 500px solid #4679BD;
}
<body>
<div class="container">
<div class="triangle"></div>
</div>
</body>
Do you want something like below:-
.triangle{
width:0px;
height:0px;
border-bottom:87px solid red;
border-left:87px solid white;
}
<body>
<div class="triangle"></div>
</body>
I currently have a hover image and I am looking to add a right border #000 that only takes up 80% of the full length of the image. I have been trying to modify other "half border" codes to work for the right border to no avail.
Anyone know how?
Disclosure: Copied from here with a few changes.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top: -1px;
left: -1px;
height: 80%;
width: 1px;
background-color: #fff;
}
<div id="holder">
<div id="mask"></div>
</div>
My suggestion would would be to create an overlay for your image that is 80% of its height.
.image-container {
position: relative;
width: 50%;
}
.image-overlay {
width: 100%;
height: 80%;
border-right: 1px solid #000;
}
.image-with-overlay {
position: relative;
}
Here's a working example: http://jsfiddle.net/dLk6xrvr/
Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}