Как сверстать блоки с треугольными закладками?

Question

Скажите, как можно сверстать блоки с такими закладками как на картинке?

body {
  margin: 0;
}

.block {
  float: left;
  display: inline-block;
  width: 25%;
  height: 100px;
}

.block1 {
  background-color: red;
}

.block2 {
  background-color: green;
}

.block3 {
  background-color: blue;
}

.block4 {
  background-color: gray;
}

.block5 {
  background-color: aquamarine;
}

.block6 {
  background-color: bisque;
}

.block7 {
  background-color: coral;
}

.block8 {
  background-color: black;
}

<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
<div class="block block5"></div>
<div class="block block6"></div>
<div class="block block7"></div>
<div class="block block8"></div>

Answer 1

Ну а размер там уже самомтоятельно определяй ;) Но, кажется, то, что надо.

body {
  margin: 0;
  position: relative;
}

.block {
  position: relative;
  float: left;
  display: inline-block;
  width: 25%;
  height: 100px;
}
.block:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: inherit;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotateZ(45deg);
  z-index: 1;
}

.block1 {
  background-color: red;
}

.block2 {
  background-color: green;
}

.block3 {
  background-color: blue;
}

.block4 {
  background-color: gray;
}

.block5 {
  background-color: aquamarine;
}

.block6 {
  background-color: bisque;
}

.block7 {
  background-color: coral;
}

.block8 {
  background-color: black;
}

<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
<div class="block block4"></div>
<div class="block block5"></div>
<div class="block block6"></div>
<div class="block block7"></div>
<div class="block block8"></div>

Answer 2

Внимание! Треугольники появляются при наведении на родительский блок.

body,
html {
  margin: 0;
  padding: 0;
}

.blocks {
  position: relative;
  overflow: hidden;
  counter-reset: albumList;
}

.block {
  position: relative;
  float: left;
  display: inline-block;
  width: 25%;
  height: 25%;
  padding-bottom: 25%;
}

.block:nth-child(1):before,
.block:nth-child(2):before,
.block:nth-child(3):before,
.block:nth-child(4):before,
.block:nth-child(5):before,
.block:nth-child(6):before,
.block:nth-child(7):before,
.block:nth-child(8):before {
  z-index: 1;
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: inherit;
  transition: all 0.5s ease-in-out;
}

.block:nth-child(1):before,
.block:nth-child(2):before,
.block:nth-child(3):before {
  left: 100%;
  top: 50%;
  margin-top: -15px;
  margin-left: -30px;
  transform: rotateZ(45deg) translate(-50%, 50%);
}

.block:nth-child(4):before {
  left: 50%;
  top: 100%;
  margin-top: -40px;
  margin-left: 7px;
  transform: rotateZ(45deg) translate(-50%, 50%);
}

.block:nth-child(5):before {
  left: 50%;
  top: 0;
  margin-top: 10px;
  margin-left: 7px;
  transform: rotateZ(45deg) translate(-50%, 50%);
}

.block:nth-child(6):before,
.block:nth-child(7):before,
.block:nth-child(8):before {
  left: 30px;
  top: 50%;
  margin-top: -7px;
  transform: rotateZ(45deg) translate(-50%, 50%);
  transform: rotateZ(45deg) translate(-50%, 50%);
}

.blocks:hover .block:nth-child(1):before,
.blocks:hover .block:nth-child(2):before,
.blocks:hover .block:nth-child(3):before {
  margin-left: 0;
}

.blocks:hover .block:nth-child(4):before {
  margin-top: -20px;
}

.blocks:hover .block:nth-child(5):before {
  margin-top: -10px;
}

.blocks:hover .block:nth-child(6):before,
.blocks:hover .block:nth-child(7):before,
.blocks:hover .block:nth-child(8):before {
  left: 12px;
}

.block:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
  opacity: 0.8;
}

.block1 {
  background-color: red;
}

.block2 {
  background-color: green;
}

.block3 {
  background-color: blue;
}

.block4 {
  background-color: gray;
}

.block5 {
  background-color: aquamarine;
}

.block6 {
  background-color: bisque;
}

.block7 {
  background-color: coral;
}

.block8 {
  background-color: black;
}

<div class="blocks">
  <div class="block block1"></div>
  <div class="block block2"></div>
  <div class="block block3"></div>
  <div class="block block4"></div>
  <div class="block block5"></div>
  <div class="block block6"></div>
  <div class="block block7"></div>
  <div class="block block8"></div>
</div>

Answer 3

<style>
.container {
width: 495px;
height: 270px;
position: relative;
border: 1px solid black;
margin: auto;
}

.ms {
width: 135px;
height: 135px;
clip-path: polygon(0 100%, 90% 100%, 90% 60%, 100% 50%, 90% 40%, 90% 0, 0 0);
position: absolute;
}

.ms:nth-child(1) {
background: plum;
}

.ms:nth-child(2) {
background: deepskyblue;
left: 24%;
z-index: -1;
}
.ms:nth-child(3) {
background: lightgreen;
left: 48.5%;
z-index: -2;
}

.ms:nth-child(4) {
background: gold;
bottom: 0;
}

.ms:nth-child(5) {
background: orange;
left: 24%;
bottom: 0;
z-index: -1;
}

.ms:nth-child(6) {
background: fuchsia;
left: 48.5%;
bottom: 0;
z-index: -2;
}
.square1 {
width: 135px;
height: 135px;
position: absolute;
background: limegreen;
right: 0%;
top: 0%;
z-index: -3;
}

.square2 {
width: 135px;
height: 135px;
position: absolute;
background: lightgreen;
right: 0%;
bottom: 0%;
z-index: -3;
}
</style>
<div class="container">
<div class="ms"></div>
<div class="ms"></div>
<div class="ms"></div>
<div class="ms"></div>
<div class="ms"></div>
<div class="ms"></div>
<div class="square1"></div>
<div class="square2"></div>
</div>

Вариант с clip-path, если больше нужно как элемент дизайна, чем динамический элемент.

БЛОГ НА HUSL

Как сверстать блоки с треугольными закладками?

Ответы (3 шт):