主页 / 问题 / 612465
Accepted
Vyacheslav Potseluyko
Asked:2020-01-09 17:19:06 +0000 UTC2020-01-09 17:19:06 +0000 UTC

预处理器上的复杂多边形

  • 772

clip-path: polygon()需要特定点。下面代码中的某种示例。

.wrapper {
  width: 960px;
  height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background-image: url(http://beerhold.it/960/722);
  background-repeat: no-repeat;
  backgorund-position: center center;
  position: relative;
}

.key {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10em;
  height: 10em;
  border: 2em solid rgba(255, 255, 255, .3);
  border-radius: 10em;
}

.block1,
.block2 {
  position: absolute;
  top: 0;
  width: 480px;
  height: 720px;
}

.block1 {
  left: 0;
  background-color: rgba(255, 0, 0, .2);
}

.block2 {
  right: 0;
}
.block3 {
  top: 0;
  width: 100%;
  height: calc(50% - 7em);
  background: rgba(0, 0, 0, 0.7);
  
}
.block4 {
  top: calc(50% - 7em);
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 14em;
  clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 94%, 15% 88%, 22% 78%, 29% 69%, 34% 60%, 34% 48%, 33% 36%, 30% 22%, 23% 14%, 12% 7%);
}
.block5 {
  bottom: 0;
  height: calc(50% - 7em);
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}
<div class="wrapper">
  <div class="block1"></div>
  <div class="block2">
    <div class='block3'></div>
    <div class='block4'></div>
    <div class='block5'></div>
    <div class='block6'></div>
  </div>
  <div class="key"></div>
</div>

如您所见，此刻它只是一条曲线，凹进了图形。任务是画一个半圆（或尽可能接近它），凹入一个图形。在我的理解中，这需要less，sass依此类推。还有sin，cos。我不知道从哪里开始，如何开始，我没有遇到过。感谢@AndreyFedorov 在这里使用他的代码片段

(!) 我同意给出相同结果的任何其他选项。

在此处输入图像描述

svg

1 个回答

  1. Best Answer

    所需的坐标path：

    • 120是圆的半径；如果需要减少，则减少两个坐标
    • 240- 区块高度
    • 1000- 块长度

    如果需要旋转切口，请使用属性transform="rotate()" 

    * {
  margin: 0;
  padding: 0;
}

.btn {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 10px solid rgba(255,255,255,0.4);
  top: 130px;
  left: -120px;
  background: transparent;
  box-sizing: border-box;
}
.btn:hover {
  border-color: rgba(255,255,255,0.7);
}
.image {
  background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg);
  background-size: cover;
  background-position: center;
  width:100%;
  height:500px;
}

.image__right {
  position: absolute;
  width:50%;
  right: 0;
  top: 0;
}

.placeholder {
  height:130px;
  background: rgba(0,0,0,0.5);
}

.border-mask {
  height: 240px;
  background: rgba(0,0,0,0.5);
  -webkit-clip-path: url(#circleClip);
  clip-path: url(#circleClip);
}
    <div class="image">
  <div class="image__right">
    <div class="placeholder"></div>
    <button class="btn">click me</button>
    <div class="border-mask">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 240" x="0px" y="0px">
        <defs>
          <clipPath id="circleClip">
            <path d="M0,0c65.4,0,120,53,120,120S65.4,240,0,240h1000V0H0z"/>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div class="placeholder"></div>
  </div>
</div>

    • 11

相关问题