我正在尝试创建一个菜单,其中包含一起形成一个正方形的直角三角形。这是我的构想:
这是我希望实现的目标:
我尝试了几种不同的方法,但是每种方法都遇到了几个问题:
<div class="menu-box">
<svg id="menu" style="border: black solid 1px" width="100" height="100" viewbox="0, 0, 100, 100">
<polygon class = "top" points='0,0 0,100 100,0' fill="none" stroke="red"/>
<text x="-18" y="68" fill="black" transform="rotate(-45)">Item</text>
<polygon points='100,0 100,100 0,100' fill="none" stroke="red" />
<text x="-18" y="84" fill="black" transform="rotate(-45)">Item</text>
</svg>
</div>
我知道这很雄心勃勃,但是可以提供任何帮助。我也对其他想法持开放态度,但这是我在网上找到的。
编辑:切换到更好的图像
答案 0 :(得分:4)
这是使用偏斜变换的想法:
* {
box-sizing: border-box;
}
.menu {
width: 150px;
border: 1px solid;
overflow: hidden;
display: flex;
justify-content: center;
}
/*maitain ratio*/
.menu:before {
content: "";
padding-top: 100%;
}
.menu a {
position:relative;
width: 100%;
flex-shrink: 0;
border: 3px solid red;
transform: skew(-45deg);
overflow:hidden;
color:#fff;
font-weight:bold;
font-size:18px;
}
.menu a:first-child span {
position: absolute;
bottom:0;
left: 50%;
width: 141%;
display: block;
text-align: center;
transform-origin: 86% 100%;
transform: translate(-50%) skew(45deg) rotate(-45deg) translateX(86%);
}
.menu a:last-child span {
position: absolute;
top:0;
left: 50%;
width: 141%;
display: block;
text-align: center;
transform-origin: 14% 0%;
transform: translateX(-50%) skew(45deg) rotate(-45deg) translateX(-86%);
}
.menu a:before {
content:"";
position:absolute;
top:0;
left:-50%;
right:-50%;
bottom:0;
background:url(https://picsum.photos/id/1069/500/500) center/cover;
transform: skew(45deg);
}
.menu a:last-child:before {
background:url(https://picsum.photos/id/1059/500/500) center/cover;
}
/*Hover */
.menu a:hover {
color:green;
border-color:yellow;
}
.menu a:hover:before {
filter:grayscale(100%);
}
<div class="menu">
<a href="#"><span>Link 1</span></a>
<a href="#"><span>Link 2</span></a>
</div>
<div class="menu" style="width:200px">
<a href="#"><span>Link 1</span></a>
<a href="#"><span>Link 2</span></a>
</div>
<div class="menu" style="width:250px">
<a href="#"><span>Link 1</span></a>
<a href="#"><span>Link 2</span></a>
</div>
您还可以直接在HTML代码中指定图片
* {
box-sizing: border-box;
}
.menu {
width: 150px;
border: 1px solid;
overflow: hidden;
display: flex;
justify-content: center;
}
/*maitain ratio*/
.menu:before {
content: "";
padding-top: 100%;
}
.menu a {
position:relative;
width: 100%;
flex-shrink: 0;
border: 3px solid red;
transform: skew(-45deg);
overflow:hidden;
color:#fff;
font-weight:bold;
font-size:18px;
background-size:0 0;
}
.menu a:first-child span {
position: absolute;
bottom:0;
left: 50%;
width: 141%;
display: block;
text-align: center;
transform-origin: 86% 100%;
transform: translate(-50%) skew(45deg) rotate(-45deg) translateX(86%);
}
.menu a:last-child span {
position: absolute;
top:0;
left: 50%;
width: 141%;
display: block;
text-align: center;
transform-origin: 14% 0%;
transform: translateX(-50%) skew(45deg) rotate(-45deg) translateX(-86%);
}
.menu a:before {
content:"";
position:absolute;
top:0;
left:-50%;
right:-50%;
bottom:0;
background-image:inherit;
background-position:center;
background-size:cover;
transform: skew(45deg);
}
/*Hover */
.menu a:hover {
color:green;
border-color:yellow;
}
.menu a:hover:before {
filter:grayscale(100%);
}
<div class="menu">
<a href="#" style="background-image:url(https://picsum.photos/id/1069/500/500)"><span>Link 1</span></a>
<a href="#" style="background-image:url(https://picsum.photos/id/1049/500/500)"><span>Link 2</span></a>
</div>
<div class="menu" style="width:200px">
<a href="#" style="background-image:url(https://picsum.photos/id/1063/500/500)"><span>Link 1</span></a>
<a href="#" style="background-image:url(https://picsum.photos/id/1069/500/500)"><span>Link 2</span></a>
</div>
<div class="menu" style="width:250px">
<a href="#" style="background-image:url(https://picsum.photos/id/109/500/500)"><span>Link 1</span></a>
<a href="#" style="background-image:url(https://picsum.photos/id/1069/500/500)"><span>Link 2</span></a>
</div>
答案 1 :(得分:1)
SVG永远是您最好的选择(根据我的经验)
SVG悬停时无法更新颜色。我最近得到的是在这里: https://jsfiddle.net/71xp6r0s
SVG:
<div class="menu-box">
<svg id="menu" style="border: black solid 1px" width="100" height="100" viewbox="0, 0, 100, 100">
<defs>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://media.self.com/photos/5b76faf02efd8652915489f5/4:3/w_752,c_limit/4.jpg" />
</pattern>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://images2.minutemediacdn.com/image/upload/c_crop,h_2914,w_5184,x_0,y_271/f_auto,q_auto,w_1100/v1566921972/shape/mentalfloss/598021-gettyimages-965401258.jpg" />
</pattern>
</defs>
<a href="https://www.google.com">
<polygon fill="url(#pattern1)" id="poly1" class = "top" points='0,0 0,100 100,0' stroke="red"/>
</a>
<text x="-18" y="68" fill="black" transform="rotate(-45)">Item</text>
<a href="https://www.google.com">
<polygon fill="url(#pattern2)" id="poly2" points='100,0 100,100 0,100' stroke="red" />
</a>
<text x="-18" y="84" fill="black" transform="rotate(-45)">Item</text>
</svg>
</div>
CSS:
.menu {
display: relative;
}
.menu .top {
background-color: black;
}
.menu .item {
clip-path: polygon("0 0, 0 100%, 100% 100%");
}
#poly1:hover{
fill:red;
}
#poly2:hover{
fill:purple
}