css3 实现平行四边形和菱形，字体不变形

最新推荐文章于 2023-04-27 15:06:48 发布

四叶草的IT小业

最新推荐文章于 2023-04-27 15:06:48 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/dashen_me/article/details/85705650

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body{
			margin:100px;
		}
		div{
			margin-bottom:100px;
		}
		.div1{
			width: 80px;
			height: 80px;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg); /* Internet Explorer */
			-moz-transform: rotate(45deg); /* Firefox */
			-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
			-o-transform: rotate(45deg); /* Opera */
			line-height: 80px;
			background: #ffb802;
			text-align: center;
		}
		.div1 span{
			 transform:  rotate(-45deg);
			 display: inline-block;
			 text-align: center;
			 overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;

		}
		.div2{
			 width: 120px;
			  height: 50px;
			  text-align: center;
			  line-height: 50px;
			  background: #E61AE6;
			  transform:skew(-30deg);   
			  -webkit-transform: skew(-30deg);   
			  -moz-transform: skew(-30deg);   
			  -o-transform:skew(-30deg);   
			  -ms-transform:skew(-30deg); 
		}
		.div2 span{
			display: inline-block;
			transform:skew(30deg);   
		    -webkit-transform: skew(30deg);   
		    -moz-transform: skew(30deg);   
		    -o-transform:skew(30deg);   
		    -ms-transform:skew(30deg); 
		    text-align: center;
		     overflow: hidden;
			  text-overflow: ellipsis;
			  white-space: nowrap;
		}
	</style>
</head>
<body>
	<!-- title属性可以鼠标滑过显示全部，如果字数过多 -->
<div class="div1">
	<span title="菱形">菱形</span>  
</div>
<div class="div2">
	<span title="平行四边形">平行四边形</span>
</div>
</body>
</html>
<script type="text/javascript">
</script>

四叶草的IT小业

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css3 实现平行四边形和菱形，字体不变形

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body{ margin:100px; } div{ margin-bottom:100px; } .div1{ width: 80px; height: 80px; ...
复制链接

扫一扫