I've created a responsive CSS3 triangle using the following guide.
GUIDE
The problem I now face is that I want to decrease its height. So it's not a 90-degree triangle but rather, I want to adjust its height to for example 30 pixels whilst maintaining a skewed triangle shape as well as it's responsiveness.
Here is what I have so far:
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: rotate(45deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I tried experimenting with the perspective transform but with no luck.
You can scale the element to whatever ratio you want. I've compressed the triangle in my code by 2. Just use transform: scale(1, 0.5) rotate(45deg);
Note: The order of transformations will do matter. The result of
transform: rotate(45deg) scale(1, 0.5); is different from transform: scale(1, 0.5) rotate(45deg);
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: scale(1, 0.5) rotate(45deg)
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
Answer by spooky daimon is way more intuitive, go for that one. Just to show the possibilities, you can also skew the pseudo element and adapt rotation as well as translation.
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: translate(25%) rotate(30deg) skew(-30deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
Related
How to make this green text ribbon stick to the left side of the image, so it will be there even if image size is shrinking responsively?
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0;
top: 0;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: center;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
try use transform-origin:0% 0% and remove the top property from span. also change top:0 to bottom:0 in img
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0px;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: 0% 0%;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
I'm trying to create a parallax background as a separator for a site. The background image seems to be only taking up about half of the size it should be with a strange white border all around it. I can't seem to find anything in my code that might be causing this and no matter what I do I either have the border, or scroll bars on the inside div. I just need the background image to fit the space of the div to make a scrolling parallax in that section.
I've tried overflow:hidden playing with various height/width combinations including calc(100vh * 2) to make the image larger. The only thing it seems to do is change the image in the container it appears in (almost like a sub container but there isn't a sub-container on it). I've also played with the transform, transform-origin, perspective, scale, and anything else I could find on google and here.
html, body {
height: 100%!important;
margin: 0px;
padding: 0px;
}
input, select, textarea {
box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.13);
}
.ico {
width: 50px!important;
height: 50px!important;
}
nav {
position: fixed!important;
z-index: 999;
width: 100vw;
}
.content_head {
background-color: aqua;
}
.content_about {
background-color: blueviolet;
}
.content_spacer {
opacity: 0;
height: 50vh;
}
.back_spacer {
opacity: 0;
}
.back1 {
background-image: url("images/IMG_1164.JPG");
background-clip: border-box;
background-size: cover;
height: 100%!important;
width: 100%!important;
min-height: 100%!important;
min-width: 100%!important;
}
.back-group {
max-height: 75vh!important;
}
.container-fluid {
padding: 0!important;
}
/* Parallax Styles Credit to: https://keithclark.co.uk/articles/pure-css-parallax-websites */
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
transform-origin-x: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
height: 100vh;
}
.parallax__layer--back {
position: absolute;
width: 30%!important;
height: 50vh!important;
top: 0;
right: 0;
bottom: 0;
left: auto;
margin: 0;
transform: translateZ(-1px);
-webkit-transform-origin-y: 100% 100% 0px;
-moz-transform-origin: 100% 100% 0px;
-ms-transform-origin: 100% 100% 0px;
transform-origin: 100% 100% 0px;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
overflow: auto!important;
}
<div class="parallax">
<div class="parallax__group">
<div class="parallax__layer--base content_head">
<h1 class="text-center my-auto">Content base</h1>
</div>
</div>
<div class="parallax__group back-group">
<div class="parallax__layer--back back1"></div>
<div class="parallax__layer--base content_spacer"></div>
</div>
<div class="parallax__group">
<div class="parallax__layer--base content_about">
<h1 class="text-center my-auto">Content base 2</h1>
</div>
</div>
<div class="parallax__group">
<div class="parallax__layer--back back">
<div class="parallax__layer--base content_spacer"></div>
<img src="images/IMG_1170.JPG" height="4096" width="3072" class="img-fluid"/>
</div>
</div>
</div>
Strictly speaking, I suppose it isn't actually a border, but more that the background image is smaller than the DIV element as a whole.
body,
html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
/* Display and position the pseudo-element */
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
.bg1::after {
background-image: url('https://images.unsplash.com/photo-1567170578400-9d182981f2a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}
.bg2::after {
background-image: url('https://images.unsplash.com/photo-1567170566770-eea3bb0b16ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}
<main class="wrapper">
<section class="section static">
<h1>Static</h1>
</section>
<section class="section parallax bg1">
<h1>Parallax</h1>
</section>
<section class="section static">
<h1>Static</h1>
</section>
<section class="section parallax bg2">
<h1>Parallax</h1>
</section>
<section class="section static">
<h1>Static</h1>
</section>
</main>
I was trying to do the pie chart based on three divs. However, there's always some unwanted border around the divs. Also, they'll expand or shrink while zooming in and out.
Try many ways on other similar questions' solutions. Still can't work.
codepen link https://codepen.io/DavidLee0314/pen/PXWzYJ?editors=1100
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
}
.pie {
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0px;
white-space: nowrap;
}
.pie .small-box {
width: 100%;
height: 100%;
}
.pie .grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.pie .green {
transform: translateX(25%);
background-color: #222;
}
.pie .change {
transform-origin: left center 0;
transform: translateZ(0) scale(1, 1) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>
just use this at *:
Border: none:
* {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
padding: 0;
border: none;
}
.pie{
left: 40%;
top: 30%;
width: 174px;
height: 174px;
border-radius: 100%;
overflow: hidden;
display: flex;
justify-content: center;
font-size: 0;
white-space: nowrap;
}
.small-box {
width: 100%;
height: 100%;
}
.grey {
transform: translateX(-50%);
background-color: #f3f5f2;
}
.green {
transform: translateX(25%);
}
.change {
transform-origin: left center 0;
transform: translateZ(0) scale(1.0, 1.0) translateX(50%) rotate(0deg);
background-color: #f3f5f2;
}
<div class="pie">
<div class="small-box green"></div>
<div class="small-box grey"></div>
<div class="small-box change"></div>
</div>
I'm trying to create a sticker pull off effect with css.
For that I found this example: https://codepen.io/patrickkunka/pen/axEgL
Now I have three problems.
I'm using an image and not only colors.
The peeling effect is way to far in the example
Because I'm using an image, I can't move it around.
Now let me show the problems with some code:
.test-sticker {
/*
.sticker:hover .sticky{
transform: rotate(10deg);
}
*/
}
.test-sticker .anim750 {
transition: all 750ms ease-in-out;
}
.test-sticker .sticker {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;
backface-visibility: hidden;
}
.test-sticker .sticker .sticky {
transform: rotate(-125deg);
}
.test-sticker .sticker .sticky {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.test-sticker .sticker .reveal .circle {
font-family: 'helvetica neue', arial;
font-weight: 200;
line-height: 140px;
text-align: center;
cursor: pointer;
}
.test-sticker .sticker .reveal .circle {
background: purple;
}
.test-sticker .sticker .circle_wrapper {
position: absolute;
width: 180px;
height: 180px;
left: 0px;
top: 0px;
overflow: hidden;
}
.test-sticker .sticker .circle {
position: absolute;
width: 140px;
height: 140px;
margin: 20px;
border-radius: 999px;
}
.test-sticker .sticker .back {
height: 10px;
top: 30px;
}
.test-sticker .sticker .back .circle {
margin-top: -130px;
background-color: green;
}
.test-sticker .sticker .front {
height: 150px;
bottom: 0;
top: auto;
-webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, 0.3);
}
.test-sticker .sticker .front .circle {
margin-top: -10px;
background: url("https://upload.wikimedia.org/wikipedia/commons/9/93/Wordpress_Blue_logo.png");
background-size: 140px 140px;
transform: rotate(-235deg);
}
.test-sticker .sticker:hover .back {
height: 90px;
top: 110px;
}
.test-sticker .sticker:hover .back .circle {
margin-top: -50px;
}
<div class="test-sticker">
<div class="wrapper">
<div class="sticker">
<div class="reveal circle_wrapper">
<div class="circle"></div>
</div>
<div class="sticky">
<div class="front circle_wrapper">
<div class="circle"></div>
</div>
</div>
<div class="sticky anim750">
<div class="back circle_wrapper anim750">
<div class="circle anim750"></div>
</div>
</div>
</div>
</div>
</div>
How do I get the greed circle just about 50% and not like now 80%?
Is there a fancy way to get the purple circle extended the same way like the green one? so when I hover over the image, I want to see the back of the sticker, which is white at the end.
Attached is a brief mockup of what I need to create. The div not only needs to skew on the bottom, but the next row will need to skew to the top.
Is there a clean way this can be done using CSS? I've tried some CSS solutions ( e.g http://jsfiddle.net/mXLgF/ ) but can not get this effect.
My current HTML / CSS is at this stage:
<div class="skew_bottom_right">
<div style="height: 300px; background: url('http://placehold.it/850x350');">
</div>
</div>
.skew_bottom_right div:after {
content: '';
position: absolute;
left: 0;
bottom: -60px;
width: 100%;
height: 115px;
background: white;
-webkit-transform: skewY(8.5deg);
-moz-transform: skewY(8.5deg);
-ms-transform: skewY(8.5deg);
-o-transform: skewY(8.5deg);
transform: skewY(8.5deg);
-webkit-backface-visibility: hidden;
z-index: 5;
}
Each of those containers will eventually made into a slide, so ideally they should be div's with background images or containing divs having a background image.
Your code is pretty good.
Just needed some minor adjustments...
.container{
overflow:hidden;
}
.parallelogram {
width: 600px;
height: 100px;
margin: 30px 0;
transform: skewY(5deg);
background: gray;
overflow:hidden;
position:relative;
}
.parallelogram.header {
height: 150px;
margin: -30px 0;
}
.parallelogram.footer {
height: 150px;
margin: -30px 0;
}
.image{
background: url(http://placekitten.com/300/300);
background: blue;
width: calc(100% / 3);
height: 100%;
display: inline-block;
float: left;
border: 3px solid white;
box-sizing: border-box;
}
<div class="container">
<div class="parallelogram header"></div>
<div class="parallelogram">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<div class="parallelogram footer"></div>
</div>