css3实现折纸效果

时间 2021-01-04 标签 css3 折纸三角形

效果图

实现步骤

1.文字居中且有立体感

/*内容块绝对居中*/
	position: absolute;
	top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
/*文字增加阴影稍微有立体感一些*/
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     overflow: hidden;

2.关键步骤，boder上右两块有颜色，下左两块为透明

border: 30px solid #7201aa;
    border-color: rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;
    background-color: #fff;

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"> .wrapper { position: relative; background-color: #36b11d; border-radius: 10px; font-family: monoca, "微软雅黑", sans-serif; width: 500px; height: 300px; margin: 0 auto; } .wrapper>p { width: 400px; height: 200px; display: block; color: #f5f5f5; font-size: 14px; /*内容块绝对居中*/ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*文字增加阴影稍微有立体感一些*/ text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); overflow: hidden; } .wrapper::before { /*设置折角实现的位置;*/ position: absolute; left: 0; bottom: 0; width: 0; content: ""; display: block; border: 30px solid #7201aa; border-color: rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent; background-color: #fff; /*设置元素的阴影效果*/ box-shadow: 1px -2px 1px rgba(0, 0, 0, 0.5); } .wrapper::after { /*设置折角实现的位置;*/ position: absolute; right: 0; bottom: 0; width: 0; content: ""; display: block; /*通过调整大小来控制折角的大小*/ border: 60px solid #7201aa; border-color: rgba(0, 255, 0, 0.2) transparent transparent rgba(0, 220, 0, 0.2); background-color: #fff; /*设置元素的阴影效果*/ box-shadow: -2px -3px 1px rgba(0, 0, 0, 0.5); } .wrapper:hover::after, .wrapper:hover>a{ display: none; } /*名字定位*/ .wrapper>a { display: block; width: 50px; line-height: 50px; text-align: center; font-size: 15px; color: #2b2b2b; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset; -webkit-transform: rotate(-45deg) inset; -ms-transform: rotate(-45deg) inset; transform: rotate(-45deg); position: absolute; right: 70px; bottom: 50px; z-index: 50; } </style>
</head>
<body>
    <div class="wrapper">
        <p>
            BEIJING - As China posted slower growth last year, many are worried that continued downward pressure on the
            world's second-largest economy could drag global growth. However, a closer look at the economy would prove
            that the concerns over a slowdown spillover are overstated.
            A more sustainable growth model, coupled with a policy package to stimulate growth, will underpin the
            economy in 2019, bringing abundant opportunities to global investors who stay prepared to cash in on the
            ever-evolving market.
        </p>
        <a href="#">CRPERLIN</a>
    </div>
</body>
</html>

转自 https://blog.csdn.net/bomess/article/details/49457959