Question

我遇到了这种形式的div元素的问题：

关于如何塑造这种形状的任何想法？理想情况下，解决方案至少应该在IE10 +中运行。提前谢谢。

不建议拆分图像。我知道这一点。两边的三角形必须是透明的。

BIG BIG EDIT

这是应该避免的。灰色背景应该保持不被覆盖。

Answer 1

这样的东西？

＆＃13;

String[] articles = {"Hitler", "SOA", "Albert_Einstein"};
void setup() {
  for (int i = 0; i < articles.length; i++) {

    String article = articles[i];

    String start = "20160101"; // YYYYMMDD
    String end = "20170101"; // YYYYMMDD

    // documentation: https://wikimedia.org/api/rest_v1/?doc#!/Pageviews_data/get_metrics_pageviews_per_article_project_access_agent_article_granularity_start_end
    String query = "http://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/en.wikipedia/all-access/all-agents/"+article+"/daily/"+start+"/"+end;

    JSONObject json = loadJSONObject(query);
    JSONArray items = json.getJSONArray("items");

    int totalviews = 0;

    for (int j = 0; j < items.size(); j++) {
        JSONObject item = items.getJSONObject(j);
        int views = item.getInt("views");
        totalviews += views;
    }

    println(article+" "+totalviews);
  }
}

＆＃13;

div {
  position: relative;
  width: 400px;
  display: inline-block;
  height: 200px;
}

div:before,
div:after {
  background-image: url('http://www.wired.com/wp-content/uploads/2015/05/the-simpsons.jpg');
  background-size: 400px 200px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100px;
  content: '';
}

div:before {
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-position: 0 0;
}

div:after {
  top: 100px;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-position: 0 50%;
}

＆＃13;

Answer 2

为了确保浏览器兼容性和渐变/图像背景，您可能会发现必须使用多个元素，以及每个嵌套div上的伪元素。快速模拟可以在下面看到。

html {
  background: radial-gradient(red, black);
}
div.wrap {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  
  
  margin: 50px auto;  /*demo only*/
}
div.part1,
div.part2 {
  position: absolute;
  height: 71%;
  width: 71%;
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
  transform-origin: top left;
  overflow: hidden;
}
div.part1:before {
  content: "";
  position: absolute;
  top: -150px;
  left: -150px;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
  background-size: 300px 300px;
  background-position: 0 -300px;
  transform: rotate(-45deg);
}
div.part2 {
  top: -50%;
}
div.part2:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
  transform: rotate(-45deg);
  background-size: 300px 300px;
  background-position: 0 50px;
}

<div class="wrap">
  <div class="part1"></div>
  <div class="part2"></div>
</div>

^{请注意背景位置可能需要更改以确保最终图像彼此“同步”。}

Answer 3

尝试着色的CSS三角形，绝对位于正方形的左侧和右侧，以在顶部和底部给出透明三角形的错觉。

Demo JS在这里搞砸了

https://jsfiddle.net/32w08myL/

HTML

<div id="square">
  <div class="triangle-left"></div>
  <div class="triangle-right"></div>
</div>

CSS

#square{
  width: 400px;
  height: 400px;
  background-image: url("https://unseenflirtspoetry.files.wordpress.com/2012/05/homer-excited.png");
  background-color: blue;
  background-repeat: no-repeat;
  display: block;
  float: left;
  position: relative;
}

.triangle-left{
  width: 0; 
  height: 0; 
  border-top: 200px solid transparent;
  border-bottom: 200px solid transparent;
  border-left: 200px solid #f3f5f6;
  position: absolute;
  top: 0; left: 0;
}

.triangle-right{
  width: 0; 
    height: 0; 
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent; 
    border-right:200px solid #f3f5f6; 
  position: absolute;
  top: 0; right: 0;
}

如何获得适用于所有浏览器（IE10 +）的div格式？

3 个答案:

HTML

CSS