10

我正在使用border-radius 属性来实现圆角。但我不确定如何获得这种形状的圆角。我尝试从两侧给出相同的尺寸，但它们只是不给我确切的形状。我在这里错过了一些 CSS3 属性吗？

在此处输入图像描述

只是想知道剪辑 css 属性是否是答案。

更新：

http://jsfiddle.net/YWnzc/136/

4

6 回答 6

21

演示

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

这应该产生：

在此处输入图像描述

效果是通过创建一个正方形，用 CSS 变换旋转它，圆角，并用一个外框剪裁它来实现的。内部元件可以根据需要进行调整，因此它有些灵活。

http://css3shapes.com/有一些很好的例子（注意页面底部的心脏）

备择方案

SVG 图像支持这种类型的形状，并且在所有现代浏览器中都受支持。简单的 SVG 可以手动编码为 XML，并且有各种免费/付费的编辑器可以使用它们。

另请参阅：Raphaël，一个用于在 Web 上处理矢量图形的库

于 2012-08-20T17:26:36.180 回答
2

具有边界半径的不同大小的三角形

翻转或更改垂直对齐 fork translateY() 和 rotate()

/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }

/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }

/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }

/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }

/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
    overflow: hidden;
    position: relative;
    margin:2em auto;
    border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
    background: #ccc;
    position: absolute;
    pointer-events: auto;
    content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}
<div class="page-container">
    <div class="triangle-bg-lg"></div>
    <div class="triangle-bg-md"></div>
    <div class="triangle-bg-sm"></div>
    <div class="triangle-bg-xs"></div>
    <div class="triangle-bg-xxs"></div>
</div>

于 2018-06-21T05:49:26.390 回答
0

如果我正确理解了您的问题。我认为您可以使用以下内容：

CSS：

#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
}
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;
}

HTML

<div id="outerbox"><div id="box"></div></div>

现场演示

http://jsfiddle.net/fsGQR//

于 2012-08-20T17:46:35.187 回答
0 
<!DOCTYPE html>
<html>
<head>
<style>

.trio {position:absolute;}
.trio .triangle {
    position: relative;
    background-color: #DB524B;
    text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
    width:  3em;
    height: 3em;
    border-top-right-radius: 33%;
}

.trio .triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
    color: #DB524B;
    position:absolute;
    font-size:50px;
    top:8px;
    left:15px;
    z-index:2;
}

.trio .triangle.tri-in {
    background-color: #fff;
    margin-top: -2.9em;
    margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
    width:  2.9em;
    height: 2.9em;
    border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>
于 2018-07-03T13:39:57.777 回答
-1

这更好

CSS

.c1 {
    width:50px;
    height:50px;
    background-color:yellow;
    -webkit-transform:rotate(45deg);
    position: relative;
    top: -65px;
    left: 25px;
    z-index:-1;
    border: 2px solid rgba(0,255,0,.6);
}
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;
}

HTML

<div class="c2">Hello</div>
<div class="c1"></div>

演示：http: //jsfiddle.net/YWnzc/237/

于 2013-12-14T00:12:45.170 回答
-1

我用它来添加 trigle 到链接：

.review-box_left-link:after{
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    background: #2195DB;
    border-radius: 2px;
    transform: rotate(-45deg);
    background: linear-gradient(to right bottom, white 0%,white 50%,#2195DB 50%,#2195DB 50%,#2195DB 100%);
}
于 2020-05-28T13:05:39.947 回答