html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法

利用HTML+CSS制作左上角卷角效果的网页的方法

2020-02-13 19:02:00 195

英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/

这篇文章中我们将介绍如何制做paper左上角的卷角效果。

我想让我的几句文字以一张有卷角折叠效果的纸为背景，如果直接用一张图片，很容易实现，但是这里我要用css来实现。

我的这种实现方法并不是非常具有创新意义，但是还是值得拿出来分享的，简单的来说，除了一个矩形容器以外，我们还需要两个三角形，如下图所示：

当我们得到两个三角形并定位好之后，改变上面的三角形的颜色，使之和整个背景色一样。你会发现我们已经制作出了折叠的效果了。

html代码

首先创建一个如下的div，包含一个标题，和一段文字内容。div有两个class，一个(page)是设定一般的page效果，另外一个(foldtl)设定纸张的卷角效果，foldtl的tl代表top left，另外我们还在最后top right的折叠效果。

Headline

Lorem ipsum dolor sit amet...

html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法相关推荐

html书页卷角效果,HTML+CSS网页制作实例制作左上角卷角效果的网页
网页制作网络技术需要大家共同分享,不能闭门造车,下面是bj-dns文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文这篇文章中我们将介绍如何制做paper左上角的卷角效果. ...
html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
php动态字体,利用纯CSS实现动态的文字效果实例
相信大家都曾在网站中看到过中效果,一打开页面,无论是文字还是图片,都随着规定时间的而变化,今天我们将介绍如何通过用纯CSS来实现这种效果,下面一起来看看. 大家可能经常会看到酷炫的网站在这类网站中能 ...
html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...
html 怎么让div卷角,css实现简约的纸张卷角效果
英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做 ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...

html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法

Headline

html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法相关推荐

最新文章

热门文章