Question

大家好我想在悬停但我有一个问题制作动画div Curl。

如何添加border-radius？

为什么我在尝试添加border-radius:3px;时问这个问题，然后卷曲颜色发生了变化，而且白色区域也很少。

以下是测试 DEMO

.curl{
  position:relative;
  width:650px;
  height:400px;
  background-color:#ffffff;
  border-radius:3px;
}
.curl:hover:before {
  border-width: 0 24px 24px 0;
}
.curl:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 0 0 0;
  border-style: solid;
  border-color: #ccc #323949;
  transition: border-width 0.5s ease;

}

Answer 1

我现在这样修好了。我回答，因为也许人们遇到了同样的问题。

正在使用 DEMO 这是Html代码：

<div class="container">
  <div class="curl"></div>
</div>

和CSS代码：

.container {
  margin:0px auto;
  width:650px;
  height:800px;
  margin-top:50px;
}
.curl {
  position: relative;
  width:640px;
  height:400px;
  background-color:#ffffff;
  border-radius:3px;
}
.curl:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 0;
  width: 0;
  border-radius: 0 0 0 6px;
  border: 0 solid;
  border-color: #d8dbdf #d8dbdf #cfcfcf #cfcfcf;
  -webkit-transition: ease-in .2s;
  -moz-transition: ease-in .2s;
  -o-transition: ease-in .2s;
  transition: ease-in .2s;
}
.container:hover .curl:before {
  border: 10px solid;
  border-color: #d8dbdf #d8dbdf #cfcfcf #cfcfcf;
}

如何添加border-radius css curl

1 个答案: