Question

我有两个并排的div，在左边我应用了clipath将它剪了一点，我想在右边的第二个div中有切割区域，所以我可以用背景色填充它努力工作。

我尝试将左下角的％设置为负值，但不起作用：/

这是现在的问题：

我试过的代码：

    <template>
  <div>
    <main class="container">
      <div class="container__left">
        <div><h2 class="fullName">I'm <span class="name">Filipe Costa</span></h2></div>
        <div>I found programming a bit late, but from that moment I realized that I discovered something new in me, quickly turned into something that does not do just to work and earn money, but mainly passion. Every day I try to learn to evolve and improve in this area, my goal involves improving every day and develop interesting projects.</div>
        <ul>
          <li>one bla bla bla</li>
          <li>two bla bla bla</li>
          <li>three bla bla bla</li>
        </ul>
        <div>
          <button class="button">know more</button>
          <button class="button">contact me</button>
        </div>
      </div>
        <div class="container__right">asdasasdasdasdasdasdadsadasdadasdasdasdasdasdasdasdasdasdasdadsa</div>
    </main>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Tajawal:300,500,800");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 1rem;
  font-family: "Tajawal", sans-serif;
  color: white;
}

main {
  margin: auto;
  display: flex;
}

.container {
  height: 80vh;
  width: 80%;
  border: 8px solid #3f3f3f;
}

.container__left {
  height: 100%;
  width: 50%;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  background-color: #1c1f24;
  padding: 1rem;
}

.container__right {
  width: 50%;
  background-color: #5b6073
}

.fullName {
  font-weight: 800;
  text-align: center;
  font-size: 2rem;
  margin: 1rem 0;
}

.name {
  color: #d75813;
}

.button {
  padding: 0.5rem 1rem;
  border: 2px solid white;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

.button:hover {
  background-color: white;
  color: #1c1f24;
}
</style>

使用右侧div从左侧div填充clipArea

0 个答案: