[英]How to create a triangle in CSS3 using border-radius
我正在使用 border-radius 属性来实现圆角。 但我不确定如何获得这种形状的圆角。 我试着从两边给出相同的尺寸,但他们就是不给我确切的形状。 我在这里缺少一些 CSS3 属性吗?
只是想知道剪辑 css 属性是否是答案。
更新:
#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,一个用于在网络上处理矢量图形的库
具有边界半径的不同大小的三角形
翻转或更改垂直对齐 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>
如果我正确理解了你的问题。 我想你可以使用类似下面的东西:
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>
现场演示
我正在使用 border-radius 属性来实现圆角。 但我不确定如何获得这种形状的圆角。 我试着从两边给出相同的尺寸,但他们只是没有给我确切的形状。 我在这里错过了一些 CSS3 属性吗?
只是想知道 clip css 属性是否是答案。
更新:
<!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>
这个更好
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/
我用它来添加三角形链接:
.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%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.