重叠 div 和居中的文本

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 属性来实现，如下所示：

.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;
}

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

Answer 2

线性渐变矩形

使用单一的线性渐变你可以创建这个形状。

.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;
}

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

重叠 div 和居中的文本

Overlapping div and text on center

html

css

css-shapes

线性渐变矩形