展会信息港展会大全

CSS 制作镂空三角形的例子
来源:互联网   发布日期:2016-03-25 16:26:37   浏览:3737次  

导读:前段时间在@一丝yisi的微博里看到一个题目“ CSS3 如何实现一个带有圆角的镂空三角形?”,当时直接在微博里面收藏了,现在有空整理一下各位大大的DEMO,嘎嘎~~~@kejunz 的 ...

前段时间在@一丝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>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港