CSS CSS折角效果

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS折角效果相关的知识，希望对你有一定的参考价值。

.note { 
  position:relative; 
  width:30%; 
  padding:1em 1.5em; 
  margin:2em auto; 
  color:#fff; 
  background:#97C02F; 
  overflow:hidden; 
} 

.note:before { 
  content:&quot;&quot;; 
  position:absolute; 
  top:0; right:0; 
  border-width:0 16px 16px 0; 
  border-style:solid; 
  border-color:#fff #fff #658E15 #658E15; 
  background:#658E15; 
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; 
  width:0; /* Firefox 3.0 damage limitation */ 
  } 

.note.rounded {
  -webkit-border-radius:5px; 
  -moz-border-radius:5px; 
  border-radius:5px; 
} 

.note.rounded:before { 
  border-width:8px; 
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px; 
}

以上是关于CSS CSS折角效果的主要内容，如果未能解决你的问题，请参考以下文章