折角折疊效果，在網站實際運用中也是非常多，當你将滑鼠懸停在上面時，就會在某些網站上看到它的折角。在這裡，我們僅用HTML與CSS來實作折角效果。
以下内容将具體講解如何建立這個效果。在本文中，我們将文章分為兩部分，在第一部分中，我們将建立基本結構。在第二部分中，我們将裝飾結構。
首先，我們先使用HTML來建立一個轉角折疊效果的結構。
在HTML代碼中，我們将使用div标記建立一個基本div，并為其指定一個類名。
HTML代碼如下：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
web前端開發公衆号，網站：www.webqdkf.com
</title>
</head>
<body>
<center>
<h1>
web前端開發公衆号
</h1>
<b>
web前端開發公衆号，網站：<a href="http://www.webqdkf.com">www.webqdkf.com</a>
</b>
<div class="Fold">
<h3>
web前端開發公衆号，網站：www.webqdkf.com</h3>
</div>
</center>
</body>
</html> 在本部分中，我們将僅使用CSS來修飾上部分中已建立的結構。
首先，我們設定基本div元素的樣式，使其不具有折疊效果，然後再建立折疊效果，我們将使用CSS :: after僞元素。
将其放置在div框的右上角，将頂部和右側邊框設定為與父div元素的背景顔色比對的顔色。
然後為左側和底部邊框賦予div背景顔色較深的陰影，當我們将滑鼠懸停在框上時，我們還将使用懸停選擇器來建立折疊效果。
<style>
h1 {
color: #19b0cb;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #19b0cb;
}
h3 {
margin: 20px;
padding: 20px;
color: #fff;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
</style> 以上就是這兩個部分的内容，我們為懸停建立了折角效果。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
web前端開發公衆号，網站：www.webqdkf.com
</title>
<style>
h1 {
color: #19b0cb;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #19b0cb;
}
h3 {
margin: 20px;
padding: 20px;
color: #fff;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
</style>
</head>
<body>
<center>
<h1>
web前端開發公衆号
</h1>
<b>
web前端開發公衆号，網站：<a href="http://www.webqdkf.com">www.webqdkf.com</a>
</b>
<div class="Fold">
<h3>
web前端開發公衆号，網站：www.webqdkf.com</h3>
</div>
</center>
</body>
</html> 最終效果如下：
