顶角贴纸效果
顶角贴纸效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顶角贴纸效果</title>
<style type="text/css">
.box {
width: 500px;
height: 500px;
margin: 50px;
padding: 56px;
box-sizing: border-box;
overflow: hidden;
position: relative;
background-color: #f5f5f5;
}
.boxInside {
background-color: #a00;
overflow: hidden;
white-space: nobox;
position: absolute;
/* shadow */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -58px;
top: 54px;
}
.boxInside a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
.wordOne {
font-size: 24px;
text-indent: 48px;
/* 多行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 11;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="boxInside">
<a href="javascript:;">Some placeholder English</a>
</div>
<p class="wordOne">
前端即网站前台部分，运行在PC端，移动端等浏览器上展现的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
</p>
</div>
</body>
</html>
