CSS - 折角效果

css 折角效果－背景图实现方式

今天在我非常崇拜的前辈的博客圆里面看到了一个 note 带折角的效果，是用背景图实现的，很简单，摘抄下来方便以后使用。

效果如图: 

 

看起来有模有样的，记得原来在 CSS揭秘 这本书里面看到过用 纯 CSS 的方式实现的。 纯 CSS 的方式留以后在扩展。

主要代码如下：

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
    <style>
        .container { width: 800px; }
        .note { position: relative;background: #fff4cc;
            border-left: 5px solid #ffe070;padding: 12px 15px; }
        .note .dogear { position: absolute;top:-1px;right: -2px;height: 14px;width: 15px;
            background: url(img/sprite-article.gif) no-repeat 0 0; }
    </style>
    
</head>
    <!-- 简单的实现一个提示小三角效果 -->
    <div class="container">
        <p class="note">
            <span class="dogear"></span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit asperiores iusto minima repellendus dicta tempora nisi quos 
　　　　　　　laudantium praesentium sed sapiente quod eius provident optio, autem beatae magnam ipsum. Aspernatur.
        </p>
    </div>
</body>
</html>

 

 

摘抄自： 猛点击这里

 

posted @ 2016-07-29 20:46  温柔的敲敲敲  阅读(510)  评论(0)    收藏  举报