要在 HTML 中使用 CSS3 实现折角效果，可以使用 CSS3 的 transform 和 rotate 属性，以及伪元素 before 和 after。具体实现步骤如下：
<div class="wrapper">
<h3>标题</h3>
<p>内容</p>
</div>.wrapper {
position: relative;
}.wrapper:before,
.wrapper:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 50px 50px;
border-color: transparent transparent #007bff transparent;
}其中，content 属性用于创建伪元素的内容，这里设置为空字符串；position 属性设置为绝对定位，以便在容器元素中定位；width 和 height 属性设置为 0，以便使用 border-width 属性来创建三角形形状；border-style 属性设置为 solid，表示使用实线边框；border-width 属性用于设置边框的宽度，这里只设置了底部和右侧的边框宽度，以便创建三角形形状；border-color 属性用于设置边框的颜色，这里设置为透明、透明、蓝色、透明，以便创建三角形形状。
.wrapper:before {
top: 0;
left: 0;
transform: rotate(180deg);
}
.wrapper:after {
bottom: 0;
right: 0;
}其中，top 和 left 属性用于将 before 元素定位在容器元素的左上角，而 bottom 和 right 属性用于将 after 元素定位在容器元素的右下角。transform 属性用于将 before 元素进行旋转，以便将三角形朝下。
.wrapper {
position: relative;
padding: 20px 50px;
}完整的代码如下：
<div class="wrapper">
<h3>标题</h3>
<p>内容</p>
</div>.wrapper {
position: relative;
padding: 20px 50px;
}
.wrapper:before,
.wrapper:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 50px 50px;
border-color: transparent transparent #007bff transparent;
}
.wrapper:before {
top: 0;
left: 0;
transform: rotate(180deg);
}
.wrapper:after {
bottom: 0;
right: 0;
}效果如下：
这是一段内容，用于测试折角效果。