css 右边三角

素颜马尾好姑娘i 2022-09-05 14:57 179阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][]

<div class="trapzoid">普通</div>
    
    .trapzoid{width:300px; height:150px;margin:200px auto; background:#06F; position:relative;
    border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      color: #fff;
      text-align: center;
      line-height: 150px;
      font-size: 50px;
      font-family:serif;
    }
    .trapzoid:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-50px;
    border-top: 75px solid transparent;
    border-left: 50px solid #06f;
    border-bottom: 75px solid transparent;}

参考的地址：

[https://www.imooc.com/article/7929][https_www.imooc.com_article_7929]

[https://blog.csdn.net/qq\_39897978/article/details/90172695][https_blog.csdn.net_qq_39897978_article_details_90172695]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/9ee1c73e3bf6438db137b7176abf843a.png
[https_www.imooc.com_article_7929]: https://www.imooc.com/article/7929
[https_blog.csdn.net_qq_39897978_article_details_90172695]: https://blog.csdn.net/qq_39897978/article/details/90172695

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 右边三角

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

素颜马尾好姑娘i/ 2022年09月05日 14:57/ 0 赞/ 180 阅读

相关 css三角制作的方法8.12

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

「爱情、让人受尽委屈。」/ 2022年09月04日 06:59/ 0 赞/ 136 阅读

相关 CSS制作三角边框

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>字符制作三角边

比眉伴天荒/ 2022年08月07日 13:35/ 0 赞/ 150 阅读

相关【CSS】css三角提示框

现在我们有一个需求，就是三角提示框像这样： ![Center][] 注意这个三角导航，我们需要达到这样的效果。第一种办法：现在有两种方案，第一种需要用到css3

「爱情、让人受尽委屈。」/ 2022年07月13日 11:54/ 0 赞/ 182 阅读

相关 CSS写三角

css写小三角 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

Love The Way You Lie/ 2022年06月14日 10:37/ 0 赞/ 140 阅读

相关自己修改select的样式（修改select右边的小三角）

CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。 \[html\] [view plain][] [copy][

电玩女神/ 2022年06月04日 05:15/ 0 赞/ 207 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 318 阅读

相关 css实现左边高度自适应右边高度

css样式： <style> .container { width: 960px;

一时失言乱红尘/ 2022年04月11日 14:07/ 0 赞/ 434 阅读

相关前端css倒三角设置方法

倒三角形：盒子宽高设为0px border设置合适的宽度，border-top设置颜色，其它透明便可 <!DOCTYPE html> <html lan

布满荆棘的人生/ 2022年03月16日 00:14/ 0 赞/ 489 阅读

相关 css 三角角标样式

.sanjiao { width: 0px; height: 0px; overflow: hidden; border

男娘i/ 2021年09月14日 01:10/ 0 赞/ 591 阅读