时间戳

首页 > 解决方案 > 我需要一只公鹿从底部变成一半红色，在顶部变成一半白色，但不是渐变的颜色机会。旁边有个黑圈

html - 我需要一只公鹿从底部变成一半红色，在顶部变成一半白色，但不是渐变的颜色机会。旁边有个黑圈

问题描述

我需要这头鹿在一个纯黑色圆圈内一半是红色，一半是白色，而且颜色机会不能是渐变的。我一直在对颜色使用线性渐变，但似乎也无法将它恰到好处地添加黑色圆圈作为背景，然后代码就会起火。

.heart-shape{
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: red;
}
.heart-shape:before,
.heart-shape:after{
  position: absolute;
  width: 200px;
  height: 200px;
  content: '';
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg,white ,white 20%,red 10px,red 25%);
}
#rcorners {
  border-radius: 100px;
  background: black;
  padding: 20px;
  width: 150px;
  height: 150px;
}
.heart-shape:before{
  bottom: 0px;
  left: -100px;
}
.heart-shape:after{
  top: -100px;
  right: 0px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br><br><br><br>
<div  style="display: block;margin-left: auto;margin-right: auto;" class="heart-shape"></div>

</body>
</html>

标签： htmlcss

解决方案

推荐阅读