Question

我希望将标志和文字放在矩形形状中，并切掉角落。我是否需要使用SVG或者我可以在纯CSS中使用它吗？

我知道可以用css制作圆形，三角形，星形等，但是我在编写这个特殊形状时遇到了麻烦。它是一个角落切掉的矩形。

Answer 1

我的评论中的例子：

＆＃13;

div {
  /* demo purpose */
  margin:0.5em;
  height:100px;
  width:100px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* end demo purpose, use your own display and sizes */
  background:
    linear-gradient(45deg, transparent 10px, black 10px, black 40%, transparent 40% ),
    linear-gradient(225deg, transparent 10px, black 10px, black 40%, transparent 40% ),
    linear-gradient(-225deg, transparent 10px, black 10px, black 40%, transparent 40% ),
    linear-gradient(-45deg, transparent 10px, black 10px, black 40%, transparent 40% ),
    linear-gradient(0deg, transparent 30%, black 30%, black 70%, transparent 70% );
  color:lightgray;
  position:relative;
  font-size:40px;
  }
div:after {
  content:'';
  padding:5px;
  border:5px solid black;
  position:absolute;
}
/* Now fill up any corner from a class */
div.green:after {
  background:lime;
  bottom:0;
  right:0;  
}
div.red:after {
  background:tomato;
  top:0;
  right:0;  
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="green">
  <i class="fa 	fa-mobile"></i>
</div>
<div class="red">
  	<i class="fa fa-crosshairs"></i>
</div>

＆＃13;

Answer 2

使用:: after和:: before

小提琴： https://jsfiddle.net/ymympva0/

.weird-shape:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid black;
    border-left: 29px solid white;
    border-right: 29px solid white;
    width: 42px;
    height: 0;
}

.weird-shape:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid black;
    border-left: 29px solid white;
    width: 42px;
    height: 0;
}

我已经包含了2个形状。一个是彩色版本，所以你可以看到它真正的作用。

Answer 3

你必须添加一个背景与图像背后颜色相同的div，并让它覆盖你想要删除的角落。

只有css的非矩形形状？

3 个答案: