2

Объясните, пожалуйста, хотя бы на одном примере каким образом создаются такие рамки?

.center-text {
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 10px;
}

.clip-each {
  width: 180px;
  height: 180px;
  position: relative;
  background: #000;
}

.clip-each:after {
  content: "";
  position: absolute;
  background: #000;
}

.clip-each,
.clip-each:after {
  -webkit-clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  clip-path: url("#octagon-clip");
}

.border-style-thin {
  background-color: #639;
}

.border-style-thin:after {
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
}

.border-style-gradient {
  background: -webkit-linear-gradient(left, #ba59a6 0%, #69aed8 50%, #1c12a8 100%);
  background: linear-gradient(to right, #ba59a6 0%, #69aed8 50%, #1c12a8 100%);
}

.border-style-gradient:after {
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

.box-shadow-inset {
  background-color: #000;
  IE 8 fallback background-color: rgba(0, 0, 0, 0.15);
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.box-shadow-inset:after {
  background: #fff;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
}
<div class="center-text">
  <div class="clip-wrap">
    <div class="clip-each border-style-thin">
    </div>
  </div>
  <div class="clip-wrap">
    <div class="clip-each border-style-gradient">
    </div>
  </div>
  <div class="clip-wrap">
    <div class="clip-each box-shadow-inset">
    </div>
  </div>
</div>

<svg class="clip-svg">
                <defs>
              <clipPath id="octagon-clip" clipPathUnits="objectBoundingBox">
                  <polygon points="0.3 0, 0.7 0, 1 0.3, 1 0.7, 0.7 1, 0.3 1, 0 0.7, 0 0.3" />
            </clipPath>
      </defs>
      </svg>

введите сюда описание изображения

0

1 ответ 1

1

По сути, эффект бордера формируется путём заполнения центра объекта:

/* задаем размеры основного блока */
.clip-each {
  width: 180px;
  height: 180px;
  position: relative;
  background: #000;
}

/* делаем доп блок, который и делает весь эффект бордеров */
.clip-each:after {
  content: "";
  position: absolute;
  background: #000;
}

/* вырезаем фигуру (самого объекта и границ) */
.clip-each,
.clip-each:after {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* градиент границ */
.border-style-gradient {
  background: linear-gradient(to right, #ba59a6 0%, #69aed8 50%, #1c12a8 100%);
}

/* здесь задаем ширину бордера путем сужения или расширения центрального блока */
.border-style-gradient:after {
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
}
<div class="center-text">
  <div class="clip-wrap">
    <div class="clip-each border-style-gradient">
    </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.