前段时间在@一丝yisi的微博里看到一个题目“ CSS3 如何实现一个带有圆角的镂空三角形?”,当时直接在微博里面收藏了,现在有空整理一下各位大大的DEMO,嘎嘎~~~
@kejunz 的 <!DOCTYPE html>
代码如下
复制代码
<html>
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style>
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-size: 24px;
}
.traingle {
position: relative;
width: 5px;
height: 5em;
background: #ffae62;
border-radius: 2px;
}
.traingle:before {
content: "";
position: absolute;
width: calc(5em - 5px);
height: 5px;
left: 2px;
top: 0;
background: #ffae62;
border-radius: 2px;
transform: rotate(30deg);
transform-origin: 0 0;
}
.traingle:after {
content: "";
position: absolute;
width: calc(5em - 5px);
height: 5px;
bottom: 0;
left: 2px;
border-radius: 2px;
background: #ffae62;
transform: rotate(-30deg);
transform-origin: 0 0;
}</style>
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
<script>
if (parent === window) {
document.addEventListener('DOMContentLoaded', function() {
// alert('Hello world!'); });
}
</script>
</head>
<body><div class="traingle" /></body>
</html>
@小水坑里的小鱼 的 DEMO
代码如下
复制代码
body {
background: #000;
}
#line,
#line:before,
#line:after {
position: absolute;
width: 10px;
height: 300px;
background: #fff;
border-radius: 5px;
}
#line:before,
#line:after {
content: '';
}
#line:before {
-webkit-transform-origin: top center;
-webkit-transform: rotate(-60deg) translate(-3px);
}
#line:after {
-webkit-transform-origin: bottom center;
-webkit-transform: rotate(60deg) translate(-3px);
}
@kejunz 和 @小水坑里的小鱼 两位大大的实现方式差不多,都是利用伪元素通过绝对定位和旋转来实现。
@点头猪 的 DEMO,妹子的方法和前面两位大大有一些区别,只了一个伪元素来绝对定位,然后通过倒影重叠来形成三角形。
代码如下
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="target-densitydpi=medium-dpi, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Demo</title>
<style>
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, section, summary, time, mark { margin:0; padding:0; }
ul, li { list-style:none; }
body { width: 320px; font-size:16px; font-family:helvetica; -webkit-user-select:none; -webkit-text-size-adjust:none; }
.wrap { padding: 10px; }
.tri, .tri:after { width: 20px; background: #000; }
.tri { position: relative; height: 100px; border-radius: 10px 10px 0 0; -webkit-box-reflect: below -9px; }
.tri:after { position: absolute; content: ""; height: 200px; border-radius: 10px; -webkit-transform: translate(-9px) rotate(-60deg); -webkit-transform-origin: top center; }
*/</style>
</head>
<body>
<div class="wrap">
<div class="tri"></div>
</div>
</body>
</html>
@一丝yisi 给出的 DEMO 也是两个伪元素,通过绝对定位和旋转来实现。不过增加了动画,让我们更加清楚的了解制作三角形的过程。(本人为了减少页面的代码量,把其他浏览器的前缀都给去掉了,只支持webkit内核浏览器。)
代码如下
复制代码
.demo{cursor:pointer;width:100px;}
.corner-rounded,.corner-rounded:after,.corner-rounded:before{width:12px;height:100px;border-radius:999px;background-color:#FFAC5F}
.corner-rounded{position:relative}
.corner-rounded:after,.corner-rounded:before{content:"";position:absolute;top:0;left:0;-webkit-transition:all 1.2s ease-in-out;-webkit-transform-origin:50% 6px}
.corner-rounded:after{-webkit-transform:rotate(-60deg)}
.corner-rounded:before{-webkit-transform-origin:50% -webkit-calc(100% - 6px);-webkit-transform:rotate(60deg)}
.demo:hover .corner-rounded:after{background-color:#88c;-webkit-transform:none}
.demo:hover .corner-rounded:before{background-color:#66E070;-webkit-transform:none}
<div class="demo" ><div class="corner-rounded" ></div></div>