使用before、after伪类制作三角形

使用before、after伪类实现三角形的制作，不需要再为三角形增加不必要的DOM元素，影响阅读。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
        div:before,
        div:after{
            content: "";
            position: absolute;
            top: 40px;
            left: 100px;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-left-color: rgb(255,255,255);

}
        div:before{
            top: 39px;
            border: 11px solid transparent;
            border-left-color: #ccc;
        }
    </style>

</head>
<body>
    <div></div>
</body>
</html>

转载于:https://www.cnblogs.com/charling/p/3655683.html

使用before、after伪类制作三角形相关推荐

html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
利用:before和:after伪类制作类似微信对话框
今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow {width: 30px;height:30px;border-width:20px;b ...
用CSS伪类实现三角形
1.实心三角形效果图: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...
php伪类,CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
css右箭头,css3 伪类实现右箭头→
css3 实现右箭头→ Document .divtest{ position: absolute; top: 100px; left: 100px; height: 3px; width: 10px ...
css伪类(before)实现小三角形
css伪类(before)实现小三角形效果代码 &::before {position: absolute;top: -6px;left: 38px;content: '';border- ...
css3 伪类写小三角,详解css如何利用 :before :after 写小三角形
之前写的三角形一直在同一个颜色,没有边框的样式.如下: CSS代码如下: .tri-up{width: 0;height:0;border-left:20px solid transparent;bo ...
【CSS】利用CSS伪类选择器实现三角形
项目中案例: .breadcrumb{height: 40px;line-height: 40px;padding: 0 20px;border-top: 1px solid #f9c700;.bre ...

使用before、after伪类制作三角形

使用before、after伪类制作三角形相关推荐

最新文章

热门文章