用CSS创造三角形案例

6.3.2 用CSS创造三角形

用div来创建,角上是平分的,所以要是内部宽高为0,其他边透明,正好是三角形。

代码

css 复制代码
div {
    border: 12px solid;
    width: 0;
    height: 0;
    border-color: transparent red transparent transparent;
}

与伪元素after结合起来,在6.3.弹出层.html中增加CSS:

css 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        figure {
            width: 144px;
            height: 153px;
            margin: 20px 20px;
            border: 1px solid #666;
            position: relative;
            float: left;
        }

        img {
            width: 144px;
            height: 153px;
            display: block;
        }

        figcaption {
            display: none;
            /* 隐藏弹出层 */
            position: absolute;
            /* 相对于容器 */
            left: 74%;
            /* 放到右边 */
            top: 15px;
            width: 130px;
            /* 弹出层宽度 */
            padding: 10px;
            /* 弹出层内边距 */
            background-color: #f2eaea;
            border: 3px solid red;
            border-radius: 6px;
        }

        /* 鼠标悬停在图片上显示 */
        figure:hover figcaption {
            display: block;
        }

        figcaption h3 {
            /*弹出层的内容*/
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }

        figcaption a {
            /*弹出层的内容*/
            display: block;
            text-decoration: none;
            font-size: 12px;
            color: #000;
        }

        /* 把弹出层设置为最高层 */
        figure:hover figcaption {
            display: block;
            z-index: 2;
        }

        /* 红色三角形盒子 */
        figcaption::after {
            content: "";
            position: absolute;
            border: 12px solid;
            border-color: transparent red transparent transparent;
            height: 0px;
            width: 0px;
            top: 17px;
            right: 100%;
        }
    </style>
</head>

<body>
    <figure>
        <img src="img/pink.jpg" alt="pink heels" />
        <figcaption>
            <h3>Pink Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/baowen.jpg" alt="baowen heels" />
        <figcaption>
            <h3>Leopard Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
    <figure class="click_me">
        <img src="img/red.jpg" alt="red heels" />
        <figcaption>
            <h3>Red Platforms</h3>
            <a href="#">More info</a>
        </figcaption>
    </figure>
</body>

</html>
相关推荐
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
我爱吃朱肉6 小时前
纯HTMLCSS静态网站——元神
css·html
格子惊蛰版6 小时前
🪲正在开发后台管理系统的同学 UnoCSS 一定要用起来
前端·css
我怎么能这么帅气6 小时前
拯救排版焦虑!CSS省略号的终极指南:单行、多行、生效与失效场景全解析
前端·css
前端大白话7 小时前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
一个天蝎座 白勺 程序猿8 小时前
Python爬虫(4)CSS核心机制:全面解析选择器分类、用法与实战应用
css·爬虫·python
sunbyte15 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
鹿九巫20 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
HuaHua的世界1 天前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
鹿九巫1 天前
【CSS】层叠,优先级与继承(三):超详细继承知识点
前端·css