css画圆和三角形

用css3的border-radius属性
右上角的1/4个圆
border-top-right-radius:100%;
左上角的1/4个圆圈
border-top-left-radius:100%
右下角的1/4个圆
border-bottom-right-radius:100%;
左下角的1/4个圆圈
border-bottom-left-radius:100%

圆则是50%；

圆的画法：先画相应矩形，在用border-radius

1.画出圆

{
  width:100px; height:100px; border-radius:50px; }

2.画出方向四个不同的半圆

.top
{
  width: 100px; height: 50px; border-radius: 50px 50px 0 0; } .right { height: 100px; width: 50px; border-radius: 0 50px 50px 0; } .bottom { width: 100px; height: 50px; border-radius: 0 0 50px 50px; } .left { width: 50px; height: 100px; border-radius: 50px 0 0 50px; }

3.画出四分之一个圆方法：

{
  width:50px; height:50px; border-radius:50px 0 0 0; }

 

4.椭圆

<div class="ellipse">
</div>
 .ellipse{
    width: 200px; height: 100px; border-radius: 50%; background: black; } 

 

5.沿横轴、纵轴劈开的半椭圆

<div class="x-ellipse">
</div>
<div class="y-ellipse"> </div> .x-ellipse{ width: 200px; height: 150px; border-radius: 50%/ 100% 100% 0 0; /*相当于50% 50% 50% 50%/ 100% 100% 0 0;*/ background: black; } .y-ellipse{ width: 200px; height: 150px; border-radius: 100% 0 0 100%/50%; background: black; } 

 

 

6.四分之一椭圆

<div class="quarter-ellipse">
</div>
.quarter-ellipse{
    width: 200px; height: 150px; border-radius: 100% 0 0 0; background: black; }

7.菱形

如果想让形状变形，但是里边的字体不变形

思路： 
变形之后，再让里边内容旋转回来

<div class="paralle"><p>transform:skew()</p></div>

.paralle {
    position: relative;
    left: 100px; width:200px; height: 100px; background:#44a5fc; line-height: 100px; text-align: center; font-weight: bolder; transform: skew(-20deg); } .paralle p{ transform: skew(20deg); }

8.三角形

#triangle-up {
    width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid lightblue; } #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid lightblue; } #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid lightblue; border-bottom: 50px solid transparent; } #triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid lightblue; border-bottom: 50px solid transparent; } #triangle-topleft { width: 0; height: 0; border-top: 100px solid lightblue; border-right: 100px solid transparent; } #triangle-topright { width: 0; height: 0; border-top: 100px solid lightblue; border-left: 100px solid transparent; } #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid lightblue; border-right: 100px solid transparent; } #triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid lightblue; border-left: 100px solid transparent; }

9.一些属性的说明

border-radius:50px 0 0 0 
等价于将border-raduis属性分成四个属性来设置，把一个圆分成上左，上右，下右，下左4份 
border-top-left-radius: 
border-top-right-radius: 
border-bottom-right-radius: 
border-bottom-left-radius:

首选需要了解border-radius 
border-radius可以是元素也可是百分比。 
border-radius:border-top-left-radius,border-top-right-radius, 
border-bottom-right-radius,border-bottom-left-radius; 
不仅仅可以为四个角分别设置值，甚至可以给每个角提供水平和垂直半径 
方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值 
举例来说， 
当 border-radius 的值为10px / 5px 20px 时， 
其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。

倒三角：

display:inline-block;
border-style:solid;
border-width:3px;
border-color:#999 transparent transparent transparent;

正三角：

display:inline-block;
border-style:solid;
border-width:3px;
border-color: transparent transparent #999 transparent;

 

转载于:https://www.cnblogs.com/handsomeboyyyyyy/p/6813661.html