css实现div一半是黑色，一半是红色；实现三角形效果

深藏阁楼爱情的钟 2022-11-20 04:49 263阅读 0赞

1，先看效果：

![20201108214934451.png][]

css样式以及html：

.div{
                width:200px;
                height:100px;
                background:linear-gradient(to right , red 0%, red 50%, black 50%, black 100% );
            }
     <div class="div"></div>

2，三角形效果：

![20201108215622964.png][]

css以及html:

.div2{
                width:200px;
                height:200px;
                background: linear-gradient(135deg,transparent 50%,red 50%);
            }
    <div class="div2"></div>

3.1三角形效果的其他实现方法:

![20201108220418417.png][]

.div3{
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 50px solid #ff0000;
            }
    <div class="div3"></div>

3.2

![202011082208578.png][]

.div2{
                width:200px;
                height:200px;
                background: linear-gradient(135deg,transparent 50%,red 50%);
                /* 角度旋转 */
                transform:rotate(15deg); 
            }

[20201108214934451.png]: /images/20221120/033046394a0f4be7a9e1d9d3f3db8c90.png
[20201108215622964.png]: /images/20221120/b1ab7a1af47f4985bc238cb240f02101.png
[20201108220418417.png]: /images/20221120/662740c21e4642e0aa544c1b30336382.png
[202011082208578.png]: https://img-blog.csdnimg.cn/202011082208578.png

发表评论取消回复

表情：

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

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

相关阅读

相关 19、一半是天使一半是魔鬼的Unsafe类详解

可能我们会奇怪，java中竟然给一个类起名字叫做“不安全”。慢慢看，你就会发现这个类的神奇之处，虽然功能很强大，但是的确不那么安全。一、简单介绍首先在Oracle的Jd

比眉伴天荒/ 2023年06月11日 06:24/ 0 赞/ 31 阅读

相关 css实现div阴影效果

.shadow { -webkit-box-shadow: b2b2b2 4px -2px 30px 8px; ; -moz

青旅半醒/ 2023年02月20日 15:57/ 0 赞/ 16 阅读

相关 css实现div一半是黑色，一半是红色；实现三角形效果

1，先看效果： ![20201108214934451.png][] css样式以及html： .div{ width:200px

深藏阁楼爱情的钟/ 2022年11月20日 04:49/ 0 赞/ 264 阅读

相关黑色星期五美电器价格低中国一半（组图）

转载自：[http://heller10.blog.sohu.com/306922357.html][http_heller10.blog.sohu.com_306922357

秒速五厘米/ 2022年08月14日 03:59/ 0 赞/ 149 阅读

相关黑色星期五美电器价格低中国一半（组图）

转载自：[http://heller10.blog.sohu.com/306922357.html][http_heller10.blog.sohu.com_306922357

Love The Way You Lie/ 2022年08月10日 11:44/ 0 赞/ 137 阅读

相关 CSS实现带阴影效果的三角形

目标效果用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。但是如果要求三角形边缘具有阴影效果，这样一来以前的

左手的ㄟ右手/ 2022年06月13日 10:22/ 0 赞/ 516 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 382 阅读

相关 css实现三角形

首先我们来看一下这种效果： div\{ width: 0; height: 0; border-left: 80px solid red;

旧城等待，/ 2022年05月15日 00:57/ 0 赞/ 308 阅读

相关 CSS实现三角形

三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的场景很多。那么怎么简单的用css实现一个三角形呢？话不多说，上代码：

Myth丶恋晨/ 2021年09月18日 17:40/ 0 赞/ 492 阅读

相关纯css 实现三角形、梯形等效果

[http://www.cnblogs.com/linsinan/p/6928734.html][http_www.cnblogs.com_linsinan_p_6928734

青旅半醒/ 2021年06月11日 15:13/ 0 赞/ 773 阅读