【发布时间】：2020-08-11 19:10:12
【问题描述】：
我回家了[1:https://i.stack.imgur.com/eRq1n.jpg][1]work，做一个类似于所附图片的网站。 我一直坚持使用“TECHNOLOGY”来获取 div，使其与里面的文本一起被挤压（右上角），并使其具有响应性并保持在父 div 内。 如果可以的话，还有一个建议是关于图像下方的文本，该文本位于绝对位置，并且在移动设备上变得更大。
谢谢！
body, html{
margin: 0 auto;
padding: 0;
max-width: 960px;
align-items: center;
font-family: 'Lora', serif;
}
/* ****Start Nav******** */
nav ul{
margin: 5px auto;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
}
li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
padding: 20px 50px;
align-items: center;
text-align: center;
margin: 2px;
color: white;
background-color: rgb(34, 101, 169);
}
/* ************* End Nav *************** */
/* ******Start 2nd Row with Title********** */
.name{
max-width: 960px;
margin: 20px auto;
display: flex;
padding: 0px 40px;
align-items: center;
}
.title {
Flex: 0 1 auto;
font-size: 1.8rem;
border-right: 1px solid black;
padding-right: 10px;
font-weight: 500;
}
.title2{
padding-left: 10px;
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
}
.contact{
margin-left: 0 auto;
line-height: 3px;
font-size: 0.7rem;
}
/* ******End 2nd Row with Title********** */
/* ********Start blue box with containers */
.blue {
position: relative;
z-index: 0;
display: flex;
max-width: 960px;
margin: 0px 40px;
height: 53vh;
background-color: rgb(189, 217, 254);
color: white;
align-items: center;
justify-content: center;
}
.tech{
padding: 0px 10px;
border-radius: 5px;
background-color: rgb(49, 137, 77);
text-align: justify;
transform: rotate(-15deg) skew(20deg) scaleX(6) scaleY(10);
}
.box1, .box2{
background-color: rgb(34, 101, 169);
color: white;
}
.box1{
position: absolute;
z-index: 1;
width: 316px;
top: 2em;
left: 2em;
font-size: 0.8rem;
text-align: justify;
padding: 10px;
}
.box1::first-line{
width: 220px;
border-bottom: 1px dashed white;
padding: 5px;
text-align: left;
font-size: 1.1rem;
}
.box2{
position: absolute;
z-index: 1;
padding: 10px 25px;
top: 31rem;
right: 22rem;
text-align: center;
font-size: 3.8rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap" rel="stylesheet">
<title>Implementing a Layout using HTML & CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">about us</a></li>
<li><a href="">contact</a></li>
<li><a href="">company</a></li>
<li><a href="">services</a></li>
</ul>
</nav>
<div class="name">
<div class="title">TechCorporate</div>
<div class="title2">Free PSD Website Template</div>
<div class="contact">
<p>Tel: xxxxxxx xxxxxxxx</p>
<p>Mail: info@domain.com</p>
</div>
</div>
<div class="blue">
<div class="tech">TECHNOLOGY</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet das</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, unde debitis quibusdam quas accusantium ipsa officia quo iste delectus modi voluptatibus harum rem saepe quod maxime quam. Velit, beatae quos ipsum dolor sit amet consectetur elit. Placeat, unde debitis.</p>
</div>
</div>
<div class="box2">Todays Technology »</div>
</body>
</html>【问题讨论】：
标签： html css position responsive skew