如何用CSS写一个三角形

html-css06

如何用CSS写一个三角形,第1张

1.可以用css3的border-radius属性来实现，支持ie9+

<div class="dm">

</div>

<div class="dm1">

</div>

<div class="dm2">

</div>

<div class="dm3">

</div>

<div class="dm4">

</div>

<div class="dm5">

</div>

<div class="dm6">

</div>

<div class="dm7">

</div>

<style>

.dm {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-bottom: 100px solid #00897B

}

.dm1{

  width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-top: 100px solid #00897Bmargin-top: 20px

}

.dm2{

width: 0

    height: 0

    border-top: 50px solid transparent

    border-right: 100px solid #00897B

    border-bottom: 50px solid transparentmargin-top: 20px

}

.dm3{

  width: 0

    height: 0

    border-top: 50px solid transparent

    border-left: 100px solid #00897B

    border-bottom: 50px solid transparentmargin-top: 20px

}

.dm4{

   width: 0

    height: 0

    border-top: 100px solid #00897B

    border-right: 100px solid transparentmargin-top: 20px

}

.dm5{

 width: 0

    height: 0

    border-top: 100px solid #00897B

    border-left: 100px solid transparent margin-top: 20px

}

.dm6{

  width: 0

    height: 0

    border-bottom: 100px solid #00897B

    border-right: 100px solid transparent

}

.dm7{

  width: 0

    height: 0

    border-bottom: 100px solid #00897B

    border-left: 100px solid transparent

}

</style>

可以建一个CSS的文件，然后调入，在这个调入的CSS文件中加入一个类，设置这个类的文本对齐方式为居中，然后在Body调入刚刚的这个类，就行了。

例如<style type="text/css">

<!--.22 {text-align: center}

--></style></head>

<body class="22">

这里面CSS就在这个文档里。

你在DM里操作CSS相对容易一些，其实用CSS布局也不难，只不过没有表格布局来的直观而已。

在html网页中引入引入css主要有以下四种方式：

（1）行内式

<p style=”color:red”>网页中css的导入方式</p>

（2）嵌入式

<style type=”text/css”>

P{ color:red }

</style>

嵌入式一般写在head中，对于单个页面来说，这种方式很方便。

（3）导入式

<!-- 导入外部样式：在内部样式表的<style></style>标记之间导入一个外部样式表，导入时用@import。 -->

<style type="text/css">

@import "jisuan.css"

</style>

（4）链接式

<link href="jisuan.css" rel=”stylesheet” type=”text/css” />

导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。