css方法制作三角形

一、給div加border來實現

<div class="triangle"></div>

<style>

?.triangle{

? ?width: 0;

? ?height: 0;

? ?border-width: 40px;

? ?border-style: solid dashed dashed dashed;

? ?border-color: red transparent transparent transparent;

? }

</style>


二、加 :after 偽類選擇器制作三角形

<div class="triangle"></div>

<style>

?.triangle{

? ? position: relative;

? ? width: 200px;

? ? height: 100px;

? ? background: blue;

? }

? .triangle::after{

? ? position: absolute;

? ? top: 100px;

? ? left: 30px;

? ? content: " ";

? ? display: block;

? ? width: 0;

? ? height: 0;

? ? border-width: 20px;

? ? border-color: blue transparent transparent transparent;

? ? border-style: solid dashed dashed dashed;

? ?}

? }

</style>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 各種純css圖標 CSS3可以實現很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,700評論 0贊 8
  • 1.長方形 #Rectangle{ width: 200px; height: 50px; background-...
    一直以來都很好閱讀 518評論 0贊 0
  • 5.橢圓 #ellipse{ width: 200px; height: 100px; background-co...
    小茶葉葉閱讀 2,127評論 0贊 1
  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，...
    kiddings閱讀 3,203評論 0贊 11
  • 作為一名大三的學長，而且我也想給馬上準備進入大學的這一批高三學子們，說說自己在大學里的一些些故事與心得，望你們能有...
    章磊磊閱讀 441評論 1贊 3