如何改变div角的形状？

Question

我试图实现这种形状的div来保存个人资料信息。

到目前为止，我已经弯曲了一个角落。但是，我遇到了平行线问题。

我的HTML：

<div class="profile-card">
  <h1>Sector Specialist</h1>
  <p>Frank ocean</p>
</div>

我的CSS：

.profile-card{
  margin-top:150px;
  float:right;
  background-color: rgba(0,0,0,0.4);
  height:500px;
  text-align:center;
  padding: 50px 40px;
  border: 2px solid red;
  border-top-left-radius: 39px;
}

codepen是https://codepen.io/anon/pen/wjMQmw

提前谢谢。

Answer 1

我会考虑使用带有一些偏斜变换的伪元素的解决方案：

.profile-card {
  background: rgba(0, 0, 0, 0.4);
  width: 200px;
  text-align: center;
  padding: 50px 0 0 40px;
  border-top-left-radius: 39px;
  border-left: 1px solid red;
  border-top: 1px solid red;
  position: relative;
}

.profile-card:before {
  content: "";
  position: absolute;
  right: -40px;
  width: 40px;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  transform: skewY(45deg);
  transform-origin: top left;
  border-top: 1px solid red;
  border-right: 1px solid red;
  box-sizing:border-box;
}

.profile-card:after {
  content: "";
  position: absolute;
  bottom: -40px;
  height: 40px;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  transform: skewX(45deg);
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  transform-origin: top left;
  box-sizing:border-box;
}

body {
 background:linear-gradient(to right,lightblue,pink)
}

<div class="profile-card">
  <h1>Sector Specialist</h1>
  <p>Frank ocean</p>
</div>

没有边框我会考虑多个渐变来实现布局：

.profile-card {
  background: 
  linear-gradient(to bottom left,rgba(0, 0, 0, 0.4) 50%,transparent 51%)0 100%/50px 50px no-repeat,
  linear-gradient(to top right,rgba(0, 0, 0, 0.4) 50%,transparent 51%)100% 0/50px 50px no-repeat,
  linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))100% 100%/calc(100%  - 50px) 50px no-repeat,
  linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 0/calc(100%  - 50px) 50px no-repeat,
  linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 50px/100% calc(100%  - 100px) no-repeat;
  width: 200px;
  text-align: center;
  padding: 50px 40px;
  border-top-left-radius: 39px;
}

<div class="profile-card">
  <h1>Sector Specialist</h1>
  <p>Frank ocean</p>
</div>

或剪辑路径解决方案：

.profile-card {
  background:rgba(0, 0, 0, 0.4);
  width: 200px;
  text-align: center;
  padding: 50px 40px;
  border-top-left-radius: 39px;
  -webkit-clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%);
clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%)
}

<div class="profile-card">
  <h1>Sector Specialist</h1>
  <p>Frank ocean</p>
</div>

Answer 2

对于超复杂边界，一种选择是使用SVG。以下是多边形的基本用法示例。嵌入到HTML中的SVG可以使用CSS轻松设置样式：

body{
  margin:0;
  height: 500px;
  background: url('https://cdn3.tropicalsky.co.uk/images/1280x720/downtown-dubai-aerial-view.jpg');
}

.profile-card{
  margin-top:5px;

  background-color: transparent;

  height:800px;
  width: 200px;
  text-align:center;
  padding: 50px 40px;
  position: relative;

}
.profile-card h1, .profile-card p {
  position: relative;
}
.frame {
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0.7;

}

<div class="profile-card">
  <svg class="frame" height="300" width="300">
    <polygon points="50 0,250 0,300 50,300 300, 50 300, 0 250, 0 50,7.5 25, 15 15, 25 7.5" style="fill:lightgrey;stroke:orange;stroke-width:1" />
  </svg>
  <h1>Sector Specialist</h1>
  <p>Frank ocean</p>

</div>