常见的css的效果--箭头--三角形--条纹

css 效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<body>
    <div class="tw"></div>
    <div class="div"></div>
    <div id="test2"></div>
    <div id="test1"></div>
    <div class="tops"></div>
    <div class="right"></div>
</body>
<style>
    /*间隔条纹效果，列表实现颜色交叉的效果*/
    .tw{
        width:300px;
        height:200px;
        margin-bottom:100px;
        background: linear-gradient(#fb3 50%, #58a 50%);
        background-size: 100% 50px;
    }
    .right{
        /*通过旋转得到90度的箭头*/
        width: 7px;
        height: 7px;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
        transform: rotate(45deg);
    }
    .div{
        background:red;
        border-radius:20px;
        padding: 1em;
        box-shadow: 0px 0px 0px 8px #655;
        outline: 8px solid #655;
    }
    #test1 {
        height:0px;
        width:0px;
        border-right: 50px solid transparent;
        border-left:50px solid transparent;
        border-bottom:50px solid red;
        /* transform:rotate(-45deg); */
      /*  border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
        border-style:solid;
        border-width:20px; */
    }
    #test2{
        height:0;
        width:0;
     
        border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
        border-style:solid;
        border-width:20px;
    }
    .tops{
        width:0;
        height:0;
        border-right:50px solid transparent;
        border-left:50px solid transparent;
        border-bottom:50px solid red;
        /* transform: rotate(45deg); */
    }
    .t-omit {
        /*
            单行文本显示、超出省略
            注意:在flex部分布局下使用可能会冲突 
        */
        display: block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .t-omit-two {
        /*
            两行文本超出省略显示 
            注意:在flex部分布局下使用可能会冲突
        */
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal !important;
    }
</style>

　　

posted @   小小强学习网  阅读(156)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae