javascript - 使用 3 个对角线图像条创建导航页面

问题描述

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

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

你知道解决这个问题的好方法吗？你有更好的方法吗？

这个想法：条纹应该有+-相同的大小。不像我的草图

按照这里的要求，代码片段。不幸的是，没有太多，因为我还没有找到一个聪明的方法：

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>

标签： javascripthtmlcss

javascript - 使用 3 个对角线图像条创建导航页面

问题描述

解决方案

推荐阅读