/* MIT https://github.com/NigelOToole/angled-edges */ .angle--top-left { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%); } @supports not ((-webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%)) or (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%))) { .angle--top-left::before, .angle--top-left::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--top-left::before { top: 0; border-width: 8vw 100vw 0 0; border-color: #fff transparent transparent transparent; } } .angle--top-right { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%); clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%); } @supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%)) or (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 100%))) { .angle--top-right::before, .angle--top-right::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--top-right::before { top: 0; border-width: 8vw 0 0 100vw; border-color: #fff transparent transparent transparent; } } .angle--bottom-left { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw)); } @supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw))) or (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw)))) { .angle--bottom-left::before, .angle--bottom-left::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--bottom-left::after { bottom: 0; border-width: 0 100vw 8vw 0; border-color: transparent transparent #fff transparent; } } .angle--bottom-right { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%); } @supports not ((-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%))) { .angle--bottom-right::before, .angle--bottom-right::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--bottom-right::after { bottom: 0; border-width: 0 0 8vw 100vw; border-color: transparent transparent #fff transparent; } } .angle--both-left-left { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw)); clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw)); } @supports not ((-webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw))) or (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw)))) { .angle--both-left-left::before, .angle--both-left-left::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--both-left-left::before { top: 0; border-width: 8vw 100vw 0 0; border-color: #fff transparent transparent transparent; } .angle--both-left-left::after { bottom: 0; border-width: 0 100vw 8vw 0; border-color: transparent transparent #fff transparent; } } .angle--both-right-right { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%); clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%); } @supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%)) or (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% calc(100% - 7vw), 0 100%))) { .angle--both-right-right::before, .angle--both-right-right::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--both-right-right::before { top: 0; border-width: 8vw 0 0 100vw; border-color: #fff transparent transparent transparent; } .angle--both-right-right::after { bottom: 0; border-width: 0 0 8vw 100vw; border-color: transparent transparent #fff transparent; } } .angle--both-left-right { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%); clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%); } @supports not ((-webkit-clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%)) or (clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%))) { .angle--both-left-right::before, .angle--both-left-right::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--both-left-right::before { top: 0; border-width: 8vw 100vw 0 0; border-color: #fff transparent transparent transparent; } .angle--both-left-right::after { bottom: 0; border-width: 0 0 8vw 100vw; border-color: transparent transparent #fff transparent; } } .angle--both-right-left { position: relative; overflow: hidden; -webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw)); clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw)); } @supports not ((-webkit-clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw))) or (clip-path: polygon(0 0, 100% calc(0% + 7vw), 100% 100%, 0 calc(100% - 7vw)))) { .angle--both-right-left::before, .angle--both-right-left::after { content: ""; position: absolute; left: 0; z-index: 10; display: block; border-style: solid; } .angle--both-right-left::before { top: 0; border-width: 8vw 0 0 100vw; border-color: #fff transparent transparent transparent; } .angle--both-right-left::after { bottom: 0; border-width: 0 100vw 8vw 0; border-color: transparent transparent #fff transparent; } } .angle__content { display: block; width: 100%; height: auto; } .angle--colour { color: #fff; background-color: #75bd3f; text-align: center; padding: 10% 0; }
<div class="demo"> <h3 class="container">上部斜め</h3> <div class="angle--top-left"> <img src="https://picsum.photos/1500/500" class="angle__content"> </div> </div> <div class="demo"> <h3 class="container">下部斜め</h3> <div class="angle--bottom-left"> <img src="https://picsum.photos/1600/500" class="angle__content"> </div> </div> <div class="demo"> <h3 class="container">上下</h3> <div class="angle--both-left-right"> <img src="https://picsum.photos/1640/500" class="angle__content"> </div> </div> <div class="demo"> <h3 class="container">背景色</h3> <div class="angle--colour angle--both-right-right"> <h2 class="header-colour__text">foo</h2> </div>