I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
width: 400px;
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
you can just use transform with scale or translate:
scale:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-4px) scale(0,1);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(4px) scale(1,1);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
translate:
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow:hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position:relative;
z-index:1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>
You can make the text as sibling to the background. Check out the fiddle.
https://jsfiddle.net/gwbdrskg/
This is the HTML
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<div class="background"></div>
<p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</div>
</body>
And the CSS
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
display: inline-block;
position: relative;
width: 400px;
}
#about_text .background {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about_text .text {
position: absolute;
top: 0;
}
#about {
top: 10%;
}
#about_button:hover + #about_text .background {
width: 400px;
}
Related
I have 10 non-nested div elements, each decreasing in size. In the CSS file they all are set to "position: absolute". They end up inside of each other which is what I want, but they are not centered.
Is it even possible to center them inside of each other while they aren't nested? I tried "position: relative", but that didn't do anything.
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</body>
</html>
The easiest way is to wrap them inside an inline-block element and remove position:absolute from the biggest one then you can easily center them:
* {
box-sizing: border-box;
}
.main {
display: inline-block;
position: relative;
}
.main>div:not(:first-child) {
border-radius: 5px;
padding: 3px;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#outer {
border-radius: 5px;
padding: 3px;
background-color: thistle;
height: 200px;
width: 200px;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
}
<div class="main">
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</div>
you could center them with calc:
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
left: calc(50% - 45px);
top: calc(50% - 45px);
}
#outer1 {
background-color: green;
height: 200px;
width: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
left: calc(50% - 95px);
top: calc(50% - 95px);
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
left: calc(50% - 90px);
top: calc(50% - 90px);
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
left: calc(50% - 85px);
top: calc(50% - 85px);
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
left: calc(50% - 80px);
top: calc(50% - 80px);
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
left: calc(50% - 75px);
top: calc(50% - 75px);
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
left: calc(50% - 70px);
top: calc(50% - 70px);
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
left: calc(50% - 65px);
top: calc(50% - 65px);
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
left: calc(50% - 60px);
top: calc(50% - 60px);
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
left: calc(50% - 55px);
top: calc(50% - 55px);
}
#outer10 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="inner"> </div>
<div id="outer1"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer10"> </div>
</body>
</html>
While css vars can't be incremented, the counter-increment can't be used as a property value and the attr() function isn't implemented yet, you still can use css to count elements with :nth-child().
Also, depending on your needs, you can use a css transformation to avoid playing with margins & positions. The browser support is very good.
div {
background-color: gray;
position: absolute;
width: 200px;
height: 200px;
}
div:nth-child(odd) {
background-color: orange;
}
div:nth-child(1) {
transform: scale(.95);
}
div:nth-child(2) {
transform: scale(.9);
}
div:nth-child(3) {
transform: scale(.85);
}
div:nth-child(4) {
transform: scale(.8);
}
/* And so on... */
<div></div>
<div></div>
<div></div>
<div></div>
I think what you need here is just a little margin added to the non-nested containers' CSS:
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
margin-left: 5px;
margin-top: 5px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
margin-left: 10px;
margin-top: 10px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
margin-left: 20px;
margin-top: 20px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
margin-left: 30px;
margin-top: 30px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
margin-left: 35px;
margin-top: 35px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
margin-left: 40px;
margin-top: 40px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
margin-left: 45px;
margin-top: 45px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
margin-left: 50px;
margin-top: 50px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
margin-left: 55px;
margin-top: 55px;
position: absolute;
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</body>
</html>
This answer is a simple alternative of Temani Afif's answer. It follows the same strategy as to wrap them all inside another div.
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outermost{
display:flex;
justify-content:center;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
}
We are using display:flex property to get our job done. HTML would look like
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outermost">
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</div>
</body>
</html>
If you need vertical alignment, all you need to do is add align-items:center to #outermost and remove absolute position in #outer. Hope this helps.
This is the fiddle for the vertical and horizontal alignment.
In my angular project I want to show divs in following manner:
My HTML looks like following:
<div class="outer-wrapper">
<div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
<img src="{{image.path}}">
</div>
</div>
<div class="inner-wrapper">
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
</div>
</div>
And my css:
.outer-wrapper {
position: fixed;
top: 160%;
left: 32%;
width: 300px;
height: 300px;
background-color: #ddd;
}
.inner-wrapper {
position: fixed;
top: 300%;
left: 40%;
width: 150px;
height: 150px;
background-color: #9e9e9e;
}
.box {
position: relative;
height: 50px;
width: 50px;
border: 1px solid black;
margin: 12px;
float: left;
}
.green {
background-color: green;
opacity: 0.3;
}
.blue {
background-color: blue;
opacity: 0.3;
}
.red {
background-color: red;
opacity: 0.3;
}
.yellow {
background-color: yellow;
opacity: 0.3;
}
.lit {
opacity: 1.0;
}
.image{
position: relative;
top: 0px;
height: 83px;
width: 83px;
}
.image img{
position: relative;
height: 50px;
width: 70px;
float: left;
border: 0.5px solid;
}
This gives me result like following:
How should I modify my html/css to arrange those images at corners? Also these divs need to be responsive.
I hope this sample can help you [open in full screen]
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.boxes = [
{ color: "green" },
{ color: "red" },
{ color: "blue" },
{ color: "yellow" }
];
$scope.images = [
{ path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
{ path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
{ path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
{ path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" }
];
});
.holder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.inner-wrapper {
height: 200px;
width: 200px;
background-color: #9e9e9e;
padding: 10px;
position: relative;
}
.inner-wrapper .box {
width: 45%;
height: 45%;
display: inline-block;
padding: 0;
margin: 0 5px 16px;
}
.inner-wrapper .box.red {
background-color: red;
}
.inner-wrapper .box.yellow {
background-color: yellow;
}
.inner-wrapper .box.blue {
background-color: blue;
}
.inner-wrapper .box.green {
background-color: green;
}
.inner-wrapper .outer-wrapper .image {
width: 100px;
height: 100px;
position: absolute;
margin: 0;
}
.inner-wrapper .outer-wrapper .image:nth-child(1) {
top: -120px;
left: -100px;
}
.inner-wrapper .outer-wrapper .image:nth-child(2) {
top: -120px;
right: -100px;
}
.inner-wrapper .outer-wrapper .image:nth-child(3) {
bottom: -120px;
right: -100px;
}
.inner-wrapper .outer-wrapper .image:nth-child(4) {
bottom: -120px;
left: -100px;
}
.inner-wrapper .outer-wrapper .image img {
width: 100%;
border: solid 1px #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="holder">
<div class="inner-wrapper">
<div class="box {{box.color}}" ng-repeat="box in boxes"></div>
<div class="outer-wrapper">
<div class="image" ng-repeat="image in images">
<img ng-src="{{image.path}}">
</div>
</div>
</div>
</div>
</body>
</html>
So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>
I'm trying to replicate this, essentially:
So basically two 50% <div>'s side-by-side, with some form of absolute positioning (I assume) to achieve the left box to go over the top of the right box (the red line is just representing the middle of the viewport)
Any hints? Thanks :)
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 100%;
height: 100%;
background-color: blue;
transform: skewX(-20deg) translateX(-40%);
position: absolute;
z-index: 10;
}
.box2 {
width: 100%;
height: 100%;
background-color: red;
z-index: 0;
}
Should be pretty simple with CSS3.
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
I offer a version without the transformation, using pseudoelement. It is faster and does not distort the text.
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 50%;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
}
.box1::after{
background: linear-gradient(to bottom right, blue 50%, transparent 0);
content: " ";
width: 20%;
height: 100%;
position: absolute;
left: 100%;
z-index: 1;
}
.box2 {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
right: 0;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Try this
.wrapper {
overflow-x: hidden;
}
.outer {
position: absolute;
width: 2000px;
left: 50%;
bottom: 0;
margin-left: -1000px;
display: flex;
justify-content: center;
align-items: center;
}
.left__inner {
background: goldenrod;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
display: flex;
justify-content: flex-end;
}
.right__inner {
background: #222;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
}
.left__text,
.right__text {
transform: skew(-45deg);
span {
font-weight: 200;
font-size: 36px;
text-transform: uppercase;
}
}
.left__text {
color: #3c3c3c;
}
.right__text {
color: Goldenrod;
}
<div class="wrapper">
<div class="outer">
<div class="left__inner">
<div class="left__text">
<span> so skewy</span>
</div>
</div>
<div class="right__inner">
<div class="right__text">
<span>span much angle</span>
</div>
</div>
</div>
</div>
I would do it like this
this is just an example, not a ready-made solution ))
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.container div {
width: 50%;
height: 200px;
position: relative;
}
.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}
In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.