划分角度

Question

我想让div有一个尖角，但我不确定最好的方法是什么。

＆＃13;

＆＃13;

.top-div {
  width: 310px;
  height: 25px;
  background-color: #A52432;
}

＆＃13;

<div class="top-div"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于这种效果，您可以使用 CSS 并制作SharedPreferences sharedPref = getActivity().getPreferences(Context.MODE_PRIVATE); SharedPreferences.Editor editor = sharedPref.edit(); editor.putString("London", "1"); editor.commit(); ，如下所示：

＆＃13;

＆＃13;

editor.putString("Paris", "1");

＆＃13;

clip-path

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用一个比 clip-path 更有支持的简单linear-gradient()来做到这一点：

＆＃13;

＆＃13;

.top-div {
  width: 310px;
  height: 25px;
  background: linear-gradient(45deg, transparent 10%, #A52432 10.01%);
}

＆＃13;

<div class="top-div"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

div总是一个矩形。我建议在div位置放置带有<polgon>的svg（参见Polygons）。

Answer 4

这是使用渐变并使其响应的另一种方法：

.top-div {
  display:inline-block;
  color:#fff;
  padding-left:40px;
  background: 
    linear-gradient(#A52432,#A52432) right/calc(100% - 40px) 100% no-repeat,
    linear-gradient(to bottom left,#A52432 50%,transparent 50.1%)left/40px 100%;
}

<div class="top-div">Some text</div>
<div class="top-div">more and more and more text</div>
<div class="top-div">more and more <br>and more text</div>