Home>

[What I want to achieve]
Click the triangle painted in orange → Jump to the WEB reservation screen
Click the white-painted triangle → Jump to the screen to make a call

【Current status】
The range of tag elements is the same height, side by side, and erodes the range of each other's triangles.

[Problems/Trials]
Create a triangle of the part I want to expand with pseudo elements. I used Z-index for each pseudo element and set it to be in front of the original tag (z direction), but when I click the red triangle, it jumps to the telephone reservation screen.

【Probable cause】
As the structure of HTML
Since it is listed in the order of WEB reservation → telephone reservation, it is estimated that the element on the telephone reservation side described later has priority and has eroded the link part of the red triangle.
However, I didn't know how to review it from the HTML structure, so I asked a question with the help of me.
We apologize for the inconvenience, but we would appreciate it if you could teach us. Thanking you in advance.

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><title>test</title></head><link rel = "stylesheet" href = "./css/style.css"><body><header>                                                                      </header></body>
// color-lists
$font_color: # 343434;
// font
$font-family-default: "Lato", "Yu Gothic", "Yu Gothic", "yugothic", "Hiragino Kaku Gothic Pro", "Meiryo", meiryo, "MS P Gothic" "," MS PGothic ", sans-serif;// Standard font
$font-family-english:'Lato', sans-serif;// English font
$font-family-japanease:'Noto Sans JP', sans-serif;// Japanese font
$font-family-base: $font-family-japanease;
$line-height-base: 1.6;
// margin
$margin-base: 8px;
// common
body {
  overflow-x: hidden;
  letter-spacing: 0.03em;
  color: $font-color;
  font-family: $font-family-default;
  letter-spacing: 0.03;}
img {
  width: 100%;
  height: 100%;
}
.header {
  height: 96px;
&_units {
    width: 100%;
    max-width: 320px;
    height: 100%;
    margin-left: $margin-base * 4;
  }
&_unit {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;

  &:: before {
      content:'';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url (../img/header_web_bg.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
    }
  &:: after {
      content:'';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url (../img/header_tel_bg.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

  }
&_ulink {
    display: block;
    height: 100%;
    width: 100%;
    z-index: 5;
    position: relative;
  &_web {
      width: 101px;
      height: 24px;
      position: absolute;bottom: 16px;
      left: 16px;
    }
  &_tel {
      width: 96px;
      height: 24px;
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }
}
.triangle_left {
  position: relative;
&:: after {
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 46px 0 0 160px;
    border-color: transparent transparent transparent # 007bff;
    transform: rotate (180deg);
    position: absolute;
    right: 100%;
    top: 2px;
    z-index: 11;
  }
}
.triangle_right {
  position: relative;
&:: after {
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 46px 0 0 160px;
    border-color: transparent transparent transparent red;
    position: absolute;
    left: 100%;
    bottom: 0;
    z-index: 11;
  }
}

[Image used]



【usage environment】
vscode
Google chrome

[Language]
HTML
SCSS

  • Answer # 1

    Even if you display a triangle with an image or border, the element itself remains a rectangle, so that method is not possible.

    Use clip-path to clip the element into a triangle.

    clip-path --CSS: Cascading Stylesheets | MDN

    
      
        
      
      
        
      
    
    .header_unit {
      border: 2px solid orange;
      width: 320px;
      height: 96px;
      position: relative;
      box-sizing: border-box;
    }
    .header_ulink {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .triangle_left {
      clip-path: polygon (0 0, 100% 0, 100% 100%);
    }
    .triangle_right {
      background-color: orange;
      clip-path: polygon (0 0, 0 100%, 100% 100%);
    }

    CodePen sample