Question

我想制作一个Rectangle In css，我想在这个Rectangle的边框上做一个三角形，但我不知道该怎么做。

我需要一个Css代码来实现这个目标：

enter image description here

如何在CSS中执行此操作？

Answer 1

我认为你正在寻找clip-path: polygon()并给它指示剪辑...阅读更多：http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 2

取这个demo

<style>
        .rect {
            background: red;
            height: 50px;
            width: 150px;
            position: relative;
            overflow: hidden;
        }
        .rect:after {
            content: "";
            background: #fff;
            height: 50px;
            width: 50px;
            -moz-transform: rotate(45deg); 
            -ms-transform: rotate(45deg); 
            -webkit-transform: rotate(45deg); 
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            display: block;
            position: absolute;
            top:-35px;
            right: -25px;

        }
    </style>
</head>
<body>
<div class="rect"></div>

Answer 3

有多种方法可以使用before和after css，也可以使用hannesr中提到的剪辑路径。

CSS before

.rect{
  width:200px;
  height:200px;
  background:#f00;
  position:relative;
}
.rect:before{
  content:'';
  border-left:60px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #fff;
  position:absolute;
  top:0;
  right:-20px;
}

CSS Clip-Path

.rect2{
width:200px;
clip-path: polygon(0px 200px,20px 200px,10px 10px,40px 40px);
-webkit-clip-path:polygon(0px 200px,20px 200px,10px 10px,40px 40px);
height:200px;
background:#0f0;
position:relative;
}

使用剪辑路径不同的方式很有趣，但请记住它就像使用SVG所以你需要知道你的坐标。如果您阅读了hannesr发布的任何内容http://www.html5rocks.com/en/tutorials/masking/adobe/，那么它的内容非常丰富，并且很多html5 rock网站都有很棒的内容。

CSS border-image

-webkit-border-image: url(border.png) 30 30 round; /* Safari */
-o-border-image: url(border.png) 30 30 round; /* Opera */
border-image: url(border.png) 30 30 round;

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image

要试用before和clip-path，请点击此链接http://jsfiddle.net/2KTVX/

另外，对于每个链接的浏览器兼容性，请按照其中一个链接

pseudo support

Transform 2D

Border Image

Answer 4

CSS3 linear-gradient()可以绘制此背景：

<强> HTML：

MQL4

必要的CSS：

<div></div>

输出图片：

div {
  background: linear-gradient(-135deg, transparent 40px, red 40px);
}

body {
  background: linear-gradient(lightgreen, green);
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(-135deg, transparent 40px, red 40px);
  height: 150px;
  margin: 20px;
  width: 400px;
}

Css在边框中有三角形的矩形

4 个答案: