Question

我有这个svg图片：http://newbonaprezosite.awery.com.ua/src/assets/images/popup/green.svg

＆＃13;

<svg width="1440px" height="389px" viewBox="0 0 1440 389" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="popup" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <polygon id="green" fill="#32AF00" points="1906 0 1906 484 -467 0"></polygon>
        </g>
    </svg>

＆＃13;

我想使用transform: rotate();创建一个看起来像这个SVG的背景。但我不知道怎么做。是否可以使用transform属性创建此背景？

Answer 1

Like this?：

<强> HTML：

<div></div>

<强> CSS：

div {
  width: 1440px;
  height: 389px;
  position: relative;
  overflow: hidden;
}
div::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #32AF00;
  width: 110%;
  height: 100%;
  transform: rotate(12deg) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

Answer 2

如何仅使用这样的背景：

＆＃13;

.box {
  width:200px;
  height:100px;
  border-top:20px solid #32AF00;
  background:linear-gradient(to bottom left,#32AF00 50%,transparent 50.5%)
}

＆＃13;

<div class="box"></div>

＆＃13;

使用transform属性创建背景

2 个答案: