Question

我正在尝试复制此图像，其中my_mutate2 <- function(df, ...) { mutate( df, !!!mutator(mean, ...), !!!mutator(sum, ...) ) }标签位于h1标签内，标签的最右端为绿色，深绿色三角形。有可能做到吗？

div

h1 {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  letter-spacing: 0.2px;
  background: #8CCA97;
  color: #FFFFFF;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 6px 18px 6px 30px;
  text-align: left;
}

Answer 1

您可以像使用pseudo-element和before这样的after来创建如下形状：

.h1 {
 font-size: 40px;
 line-height: 50px;
 font-weight: bold;
 letter-spacing: 0.2px;
 background: #8CCA97;
 color: #FFFFFF;
 margin-top: 0px;
 margin-bottom: 0px;
 padding: 6px 18px 6px 30px;
  position: relative;
 text-align: left;
 }

.h1:after {
  content: '';
  border-top: 31px solid transparent;
  border-left: 45px solid transparent;
  border-bottom: 31px solid green;
  border-right: 45px solid green;
  position: absolute;
  right: 0;
  top: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="row">
     <div class="col-sm-12">
          <h1 class="h1"> Weekly Requirements</h1>
      </div>
</div>
</body>
</html>

根据情况（基本上是如何处理responsive），必须注意呈现这种形状。

Answer 2

您不能直接使用CSS创建一个三角形div，但是，可以通过一些技巧来实现它。

find . -name "*.pdf" | xargs du -sch

这是一个工作的jsfiddle： https://jsfiddle.net/anc8s532/

Answer 3

不需要任何伪元素或复杂的代码，带有渐变的简单背景就可以轻松做到，并且具有响应性：

h1 {
 background:
  linear-gradient(to top left,darkgreen 49%,transparent 50%) right/100px 100% no-repeat,
  lightgreen;
}

/*Extra styles*/
h1 {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 6px 18px 6px 30px;
}

<h1> Weekly Requirements</h1>

彩色DIV元素末端的形状

3 个答案: