如何使用CSS中的对角线网格制作响应式菜单?
我正在为网站创建模板。在那里,我想创建这样 如何使用CSS中的对角线网格制作响应式菜单?
一个菜单,我发现下面的代码作为一种解决方案
,但我不能获得股利分为4个部分,并以快速响应的方式添加文本。可以使用position:absolute
,但它没有响应。我如何以响应的方式使用css来实现这一点?
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform: translateY(20px) translateX(5px) rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>
您可以使用CSS Flexbox的 & CSS变换属性来实现这一目标。看看下面的代码片段:
body {
padding: 20px;
}
.menu-cover {
width: 360px;
height: 360px;
overflow: hidden;
background: #eee;
}
.menu {
list-style: none;
margin: -70px 0 0 -70px;
padding: 80px;
display: flex;
flex-wrap: wrap;
width: calc(600px - 100px);
height: calc(600px - 100px);
position: relative;
transform: rotate(45deg);
transform-origin: center;
}
.menu:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: #aaa;
}
.menu:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 1px;
background-color: #aaa;
}
.item {
width: 50%;
}
.item a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-45deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu-cover">
<ul class="menu">
<li class="item">
<a href="#">Bussiness</a>
</li>
<li class="item">
<a href="#">Team</a>
</li>
<li class="item">
<a href="#">Talent</a>
</li>
<li class="item">
<a href="#">Group</a>
</li>
</ul>
</div>
希望这有助于!
不错的解决方案,但没有响应。 – Roberrrt
谢谢你。这工作。但没有回应。关于那件事情的不幸。 –
请检查下面的代码。您可以用相同的方式实现您的需求。我已添加<span>
标签以显示文字。
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform: translateY(20px) translateX(5px) rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
<div class="background">
<span style="float:left;padding-left:20%">Business
</span>
<span style="float:left;padding-left:5%">Team
</span>
<span style="float:right;padding-left:5%">Talent
</span>
<span style="float:left;padding-left:20%">Group
</span>
<div class="line1"></div>
<div class="line2"></div>
</div>
请不要使用只有链接的答案,因为链接可能停止,您的答案将徒劳无益。另外,这不响应 – Roberrrt
您可以使用伪元素,如before
和after
。请检阅最新的答案。希望对你有所帮助。
.background {
background-color: #BCBCBC;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
.background:before {
width: 1px;
height: 500px;
background :red;
-webkit-transform: rotate(45deg);
position: absolute;
content:'';
left: 0;
right: 0;
margin:-200px auto 0;
}
.background:after {
width: 1px;
height: 500px;
background :green;
-webkit-transform: rotate(-45deg);
position: absolute;
content:'';
left: 0;
right: 0;
margin:-200px auto 0;
}
<div class="background">
</div>
这不响应。 – Roberrrt
您可以将它作为2 * 2网格的普通盒子,只有内部边框到4格,然后旋转它们45deg –
是否有必要在移动视图中使设计保持一致?我们不能将其更改为在移动设备上列出视图吗? –