Question

我想创建一个导航页面，其中3个图像显示为斜条纹。我的第一种方法是使用div并将-webkit-transform转换为：倾斜为形状。问题在于，第一个和最后一个图像会留下很多可用空间。

我的第二种方法是使用画布，因为它允许我自由定义形状。我不确定是否可以将图像用作按钮（onclick事件），因为形状是正确的，但div将保持矩形。结果是，例如，如果单击中间图像并且中间div与第一个div重叠，则会触发第一个图像的第一个功能。

您知道解决此问题的好方法吗？您有更好的方法吗？

这个想法： The stripes should have the +- the same size. Unlike my sketch

根据此处的代码片段。不幸的是，因为我还没有找到一种聪明的方法，所以还没有很多东西。

html, body{
    width: 1024px;
    height: 768px;
    
}

:root{
    --preset-screen-width: 1024px;
    --preset-screen-height: 768px;
    --main-img-width: calc((var(--preset-screen-width) / 3) - 5px);
}
/*
.Hidden-Images {
    width: 1024px;
    height: 768px;
}
*/
.Hidden-Image_1{
    width: 1024px;
    height: 768px;
    background-image: url(../img/redhead.jpg);
    background-size: 1024px 768px;
    background-repeat: no-repeat;
    display: none;
} 

.Hidden-Image_2{
    width: 1024px;
    height: 768px;
    background-image: url(../img/brownhead.jpg);
    background-size: 1024px 768px;
    background-repeat: no-repeat;
    display: none;
} 

.Hidden-Image_3{
    width: 1024px;
    height: 768px;
    background-image: url(../img/loecklihead.jpg);
    background-size: 1024px 768px;
    background-repeat: no-repeat;
    display: none;
}

.Image-Stripes-Holder{
    width: 1024px;
    height: 768px;
    text-align:center;
    background-color: rgb(93, 129, 39);
    overflow: hidden;
}

.First-Image-Holder{
    width: var(--main-img-width);
    height: var(--preset-screen-height);
    border: red 1px solid;
    display: inline-block;
    -webkit-transform: skew(20deg);
    overflow: hidden;
}

.Second-Image-Holder{
    width: var(--main-img-width);
    height: var(--preset-screen-height);
    border: blue 1px solid;
    display: inline-block;
    -webkit-transform: skew(20deg);
    overflow: hidden;
}

.Third-Image-Holder{
    width: var(--main-img-width);
    height: var(--preset-screen-height);
    border: green 1px solid;
    display: inline-block;
    -webkit-transform: skew(20deg);
    overflow: hidden;
}

<!doctype html>
<html>
  <head>
    <title>CH.Valette_S1.C1_2019.1850-DE</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/valette_custom.css">
    <link rel="stylesheet" href="modules/essential/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="modules/noBouncing/noBouning.js"></script>
    <script type="text/javascript" src="modules/fastSwipe/fastSwipe.js"></script>
    <script type="text/javascript" src="modules/essential/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="modules/fastSwipe/_vendor/jquery-ui.min.js"></script>
    <script type="text/javascript" src="modules/essential/veeva-lib/veeva-library-3.2.js"></script>
    <script type="text/javascript" src="modules/fastSwipe/_vendor/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="modules/fastSwipe/accelerator/lib/touchy.min.js"></script>
    <script type="text/javascript" src="modules/fastSwipe/_vendor/iscroll.js"></script>
    <script type="text/javascript" src="modules/essential/bootstrap/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="Hidden-Images">
        <div class="Hidden-Image_1">
   
        </div>
        <div class="Hidden-Image_2">
      
        </div>
        <div class="Hidden-Image_3">
   
        </div>
    </div>
    <div class="Image-Stripes-Holder">
        <div class="First-Image-Holder">
            <!--<img class="First-Image" src="assets/img/redhead_small.jpg">-->
        </div>
        <div class="Second-Image-Holder">
            <!--<img class="First-Image" src="assets/img/brownhead_small.jpg">-->
        </div>
        <div class="Third-Image-Holder">
            <!--<img class="First-Image" src="assets/img/loecklihead_small.jpg">-->
        </div>
    </div>
  </body>
  </html>

Answer 1

您可以尝试在HTML中使用地图来定义点击区域。过去曾经做过，效果很好。

记住要使用 <area shape="poly">用于地图，并定义点击区域的坐标。

可以找到更详细的阅读示例，here。

创建带有3个对角图像条的导航页面

1 个答案: