Question

有没有办法用CSS和HTML创建一个尖锐的平角？

这样的事情：

  ____
 /    \
 |    |
 \____/

Answer 1

看这里在那里你找到了你所需要的一切：

http://css-tricks.com/examples/ShapesOfCSS/

编辑如果链接丢失：

CSS

#octagon { 
  width: 100px; 
  height: 100px; 
  background: red;  
  position: relative; 
} 

#octagon:before { 
  content: ""; 
  position: absolute;  
  top: 0; left: 0; 
  border-bottom: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; height: 0; 
} 

#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
}

Answer 2

这是我的解决方案，使用Chris Coyier的CSS形状。

http://jsfiddle.net/dDejan/XSs9L/

通过JavaScript（实际上是jQuery）为您希望以这种方式塑造的每个容器插入4个额外的div。这些div完全位于它的父角落中，并且它们的设计相应如Sven Bieder发布的链接所述

Answer 3

您可以使用CSS triangles技术使用绝对定位的:before和:after元素进行组合。

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

的CSS：

.box {
   background-color:#2020ff;
   height:50px;
   width:50px;
   position:relative   
}

.box:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-right:10px solid #ffffff;  
    position:absolute;
    top:-9px;
    right:0px;

}

Answer 4

box {
  background-color: transparent;
  position: fixed;
  width: 300px;
  height: 300px;
}
svg {
  width: 300px;
  height: 300px;
}
polygon {
  visibility: visible;
  background: black;
  stroke: white;
}

<box>
  <svg>
    <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
  </svg>
</box>

Answer 5

这里是整个盒子的完整解决方案。它根据内容大小进行缩放，就像您对常规 div 所期望的那样。您可以使用 height 和 width 属性轻松调整其大小，而无需修改任何其他内容。它是 this codepen 的修改版本。

div {
  padding: 5px;
  margin: 40px auto;
  width: 230px;
  background: rgba(47,51,54,1); /* fallback */
  background:
        -moz-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -o-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -webkit-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  xbackground:
        linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
}

div {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

p {
  border-left: none;
  border-right: none;
  color: #ccc;
  margin: 0;
  min-height: 40px;
  padding: 10px;
  position: relative;
}

<div>
  <p>Here is some content.</p>
</div>

https://codepen.io/c0n5/pen/vYyRPVZ

Answer 6

.rotate {
    margin: 100px;
    background-color: olivedrab;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="rotate"></div>
</body>

</html>

平尖角或斜角

6 个答案: