关于CSS3三角的实现

2024-04-27 14:26:50

字体：大中小

来源：转载

供稿：网友

关于CSS3三角的实现

1，向上的三角

1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>border-radius</title>6<style>7div{8width:0;9height:0;10border-left:20pxsolidtransparent;11border-right:20pxsolidtransparent;12border-bottom:20pxsolid#ccc;13}14</style>15</head>16<body>17<div>18</div>19</body>20</html>

2，向下的三角

1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>border-radius</title>6<style>7div{8width:0;9height:0;10border-left:20pxsolidtransparent;11border-right:20pxsolidtransparent;12border-top:20pxsolid#ccc;13}14</style>15</head>16<body>17<div>18</div>19</body>

20</html>

3，向左的三角

1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>border-radius</title>6<style>7div{8width:0;9height:0;10border-top:20pxsolidtransparent;11border-bottom:20pxsolidtransparent;12border-right:20pxsolid#ccc;13}14</style>15</head>16<body>17<div>18</div>19</body>

20</html>

4，向右的三角

1<!doctypehtml>2<html>3<head>4<metacharset="utf-8">5<title>border-radius</title>6<style>7div{8width:0;9height:0;10border-top:20pxsolidtransparent;11border-bottom:20pxsolidtransparent;12border-left:20pxsolid#ccc;13}14</style>15</head>16<body>17<div>18</div>19</body>

20</html>

上一篇：修改代码主题等，提高阅读体验

下一篇：CSS background 属性