我如何使用 Css 进行设计 [关闭]答案

【问题标题】：How I Can Design With Css [closed]我如何使用 Css 进行设计 [关闭]
【发布时间】：2019-02-25 10:25:09
【问题描述】：

我想做以下设计。
我使用了 HTML 图形，但没有用。
我怎样才能使用css 和html？

【问题讨论】：

你好Heydari，到目前为止你有什么尝试？你在 Stack 上看过这里吗？向我们展示您的代码以及不适合您的代码。
一个好的起点：stackoverflow.com/a/54550358/8620333
css-tricks.com/the-shapes-of-css/#pointer
https://jsfiddle.net/a4wsju97/
codepen.io/HerrSerker/pen/QoLJwq?editors=1100

【解决方案1】：

.new_site_ribbon {
  position: absolute;
  right: 50px;
  height: 20px;
  background: #C5BBD4;
  background: -webkit-linear-gradient(top left, #C5BBD4, #FC9D96);
  background: -moz-linear-gradient(top left, #C5BBD4, #FC9D96);
  background: linear-gradient(top left, #C5BBD4, #FC9D96);
  padding: 0 5px;
}

.new_site_ribbon:before {
  content: "";
  width: 0;
  height: 0;
  border-width: 10px 5px;
  border-style: solid;
  border-color: rgba(164, 157, 218, 0.65) rgba(164, 157, 218, 0.65) rgba(164, 157, 218, 0.65) transparent;
  position: absolute;
  left: -10px;
}

.new_site_ribbon:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid #fc9d96;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  right: -10px;
}

&lt;div class="new_site_ribbon"&gt;Take the tour!&lt;/div&gt;

【讨论】：