How change the shape of div corners? - html

Question

I am trying to achieve this shape of div to hold profile information.
So far I've curved one of the corners. However, I am having problems parallel lines.
My HTML:
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
My 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;
}
The codepen is https://codepen.io/anon/pen/wjMQmw
Thank you in advance.

Answer 1

I would consider a solution with pseudo-element with some skew transformation:
.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>
Without the border I would consider multiple gradient to achieve the layout:
.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>
Or the clip-path solution:
.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

For super complex bordering, one option is to use SVG. Here is an example of basic usage of polygon. SVG embedded into HTML can be styled using CSS easily:
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>