我的左上角有一个折叠效果的容器，但是我无法隐藏左上角的背景。有人可以帮忙吗？
.container {
position: relative;
border: 2px solid blue;
background-color: #FFF;
color: #252525;
font-size: 14px;
line-height: 21px;
margin-bottom: 20px;
padding: 16px;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 20px solid blue;
border-left: 20px solid transparent;
}
.container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-right: 20px solid blue;
}<div class="container">
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we
give rest half. Painful so he an comfort is manners. You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness
continued ten. Admitting day him contained unfeeling attention mrs out.
</div>为了确保我建议您进行一些更改：
在.container规则中删除overflow: hidden，因为它显然没有在视觉上影响结果（假设heigh属性仍然是auto - 因为<div>默认值是auto）。
你只需要::before（删除::afeter），但在-2px和top属性中设置left并设置white颜色而不是透明的border-left。
它看起来像这样：
.container{
position:relative;
border: 2px solid blue;
background-color: #FFF;
color: #252525;
font-size: 14px;
line-height: 21px;
margin-bottom:20px;
padding:16px;
}
.container:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
border-bottom: 20px solid blue;
border-left: 20px solid white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners.
You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness continued ten. Admitting day him contained unfeeling attention mrs out.
</div>
</body>
</html>这是一个只考虑容器和一些渐变作为边框和背景的想法：
.container {
font-size: 14px;
line-height: 21px;
border: 2px solid blue;
border-image:linear-gradient(135deg, transparent 16px, blue 16px) 2;
background:
linear-gradient(to bottom right,transparent calc(50% - 1px),blue calc(50% - 1px)) top left/20px 20px no-repeat;
padding: 16px;
}<div class="container">
Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we
give rest half. Painful so he an comfort is manners. You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness
continued ten. Admitting day him contained unfeeling attention mrs out.
</div>这将删除左上角的背景
.container{
position:relative;
border: 2px solid blue;
background-color: #FFF;
color: #252525;
font-size: 14px;
line-height: 21px;
margin-bottom:20px;
padding:16px;
overflow: hidden;
}
.container:before{
content: "";
position: absolute;
top: 0;
background:transparent;/* this is the new line, background transparent is the same as "removing" it */
left: 0;
border-bottom: 20px solid blue;
border-left: 20px solid transparent;
}
.container:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-right: 20px solid blue;
}