问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用css实现折角效果？

头像
MARKORMARK
    1.3k1720

    图片描述
    这个效果如何用最简单的办法实现？召唤各位热心大神

    csshtml5html
    阅读 10.2k
    3 个回答
    得票最新
    头像
    摩天轮下的肖邦曲
      5053613
      ✓ 已被采纳
      <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            background: #000;
        }
        .page{
            margin: 100px auto;
            width: 100px;
            height: 100px;
            background: -webkit-linear-gradient(top right,transparent 15% ,#ccc 0);
            position: relative;
            border-radius: 5px;
        }
        .page:after {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background: -webkit-linear-gradient(top right,transparent 50% ,#fff 0);
            top: 0;
            right: 0;
            border-bottom-left-radius:5px;

        }
    </style>
</head>
<body>
    <div class="page"></div>
</body>
</html>

      效果如下

      clipboard.png

      头像
      陈小二kkk
        2701411

        可以用css3加上：after来实现~~原理可以看看一个简书

        我做过一个demo，你可以看一下~~

        头像
        华猾稽
          1.1k1724
          div {
    width: 30px;height: 30px;
    border-left: 30px solid transparent;
    border-top: 30px solid transparent;
    border-right: 30px solid #eee;
    border-bottom: 30px solid #eee; /* 这一条与上一条的 #eee 规定折角颜色 */
    box-sizing: border-box; /* 去除这一条可制作指向右下角的箭头（90 * 90px） */
}
          <div></div>

          Chrome 测试通过 - 其它浏览器未测。
          这应该是最简单的了。
          用类似方法可以造出一共 8 个方向的三角形。可以百度：CSS 三角形。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏