具有线性渐变的Rect

Question

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Title</title>
</head>
<body>
  <div id="container" style=" height: 100px;
  width: 100px;
  overflow: hidden;
  background-color:red;">
       <a class="well-link" href="">Test</a>
    <div id="triangle-topleft" style="width: 0; 
  height: 0; 
  border-top: 100px solid gray; 
  border-right: 100px solid transparent;">     
    </div>
  
  </div>
 
 
</body>
</html>

我想创建div，就像我使用CSS / HTML和Jquery上传的图像一样请帮我我试过这个..但是无法在中心获取文字

Answer 1

您可以通过使用:after伪元素和CSS transform属性来实现这一目标：

＆＃13;

.div {
    position: relative;
    height: 100px;
    width: 100px;
    overflow: hidden;
    background-color: red;
    border: 5px solid #000;
    color: #fff;
    text-align: center;
    line-height: 100px;
    z-index: -2;
}
.div:before {
    content:'';
    position: absolute;
    left: 20%;
    width: 100%;
    height: 200%;
    background-color: green;
    top: 0;
    border-left: 5px solid #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: -1;
}

＆＃13;

<div class="div">
    <a>1</a>
</div>

＆＃13;

Answer 2

具有线性渐变的Rect

使用单个线性渐变，您可以创建此形状。

＆＃13;

.rect {
  position: relative;
  border: 5px solid black;
  background-image: linear-gradient(-45deg, firebrick 47%, black 47.5%, black 53%, green 53.5%);
  height: 100px;
  width: 100px;
}
.rect a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 2em;
  color: white;
}

＆＃13;

<div class="rect">
  <a>1</a>
</div>

＆＃13;

在中心重叠div和文本

2 个答案:

具有线性渐变的Rect