用css画出对话框

2023-05-10,,

aaarticlea/png;base64,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Pbpjg5fo5yVaR3OUO/pxjxpNysHlsaxm3fnHdouPLUOuPicAyA+GfAIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXgAgA4heACADiF4AIAOIXggnu2b5cOHQrdf+89acOGwpUHQF4RXHBLaan0ne9Ir7xi96dPl3r2lLp0kd59t7BlA5AXBBfcsmGD1Lu39PLLUm2t1K2btGePBdoDD0jV1dK6ddIHH0inT0tffGF/9++3xwA4j+CCe4YPtxrXwYPSoEHSqVPS8uXSiBHSgAHSHXdIffpIgYA0ZYoF2qhR0ooVhS45gBwguOCeUaOkefOkhgape3fp6FHptdcs0G69VfryS2nrVms+rK2VfvAD6b77Cl1qADlCcMEtc+ZIF15ozYXr10sPPST17y8VF0uLF0t9+0pDh1qt6ze/sSbFX/7SAm3NmkKXHkAOEFxwy/Ll0ptvWg3r88+lmhoLs9Wrpbo66aabrHlw3jx77MMPpWPHpM2bbX4AziO40HrU1krPPScdP17okgBoRgQX3PLnP0eew5WKDRukBQuapzwA8o7ggluKi6WqqvSeM38+nTOAVoTgglvuuEPatSu95yxcKI0b1zzlAZB3BBfccuedmQXXQw81T3kA5B3BBbcQXECbR3C54PBhG4dv587I6eXl0ksvSVu2hKYdPWqjSrz+uvWya20ILqDNI7hauooKyeeT/vM/pWeeCU2fPVvq0UMaP166/no7R6m+Xrr3XhtBondvG2Hi1KnClb05EFxAm0dwtXSHD0ubNknXXis9+6xNq6mROne2kSIkG6PvySelRYsssCRp927pssukbdukHTukzz6zx19/XTpxwgJt1So7abehQVq5Utq7tzCvMR0EF9DmEVyu6NkzVOPatk264gqpstLuz5xpwxw9/rjk99u006dt5PQVK6SSEul737PHBw6U7r7bRk2/8krpr3+1UScuvdSW29IRXECbR3C5oKHBmgWDwfXuu1ab2r3b7r/0kjR4sI2CHjxfqaFBuvFGqazMgitYE2tosNB75x27AOP110u9elltzAUEF9DmEVwuiA6u9eulDh1CJ+LOmCGNHi098kioxlVXZ6Ojf/CBNGGC1baCuna18f0k6cc/ttHTXdGvX/onIM+bJ40Z0zzlAZB3BJcrevWSZs2y/0+ckDp1kt56y+4PHmzhtWiRhZJkx8U6drSLJz70kF2fSrLayuWXW0/ExYttUNpu3WzgWhdMnCjt25fec/7xj9DxQQDOI7hauo0brfnvu9+1DhqTJtlo53/9q4XXL38p3XOPjd9XVycNGWKX+fD5pKeftmWMHSv99KfWZNi1q13uo6pKuvpqay5cudJCbs+ewr5WAEgBwdXSVVdLS5bYtaRWrbLjW8Hzs9atk5YtsyALOnHCjl999FFo2pgx0v3323Pfey8034YN9v+ZMxaQ4csBgBaK4GoLRoygcwKAVoPgaguqqkI9EAHAcQQXAMApBBcAwCkEFwDAKQQXAMApBBcAwCltJrhqamo0ceJEXXLJJbr44ou5OXobPHiwdqU7VqFkgw2PHGnnsz3wQPyb3y/9/vet81pmQCvRZoLr1VdfVbt27dS1a1fdcMMN3By9nXXWWRo+fHj6G8DevXby9dq1iW/vv28ndtfX534jBJATbSa4nnjiCbVv377QxUCWOnTooM6dOxe6GAAKqM0E15QpU/TVr35Vx48fL3RRkIWLL75Y3bt3L3QxABQQwQWnEFwACC44heACQHDBKQQXAIILTiG4ABBccEpOg6u6Wjp8OHLa/v3SyZO5WT6AZkFwwSk5Ca7aWrs6dN++0s9/Lv3lLxZWY8dKN9wg9eghbdqUmwIDyDmCC07JSXAdOCDNmmVXfJ4/X+rVSyork7p1k/btkx58ULrnntD8R47YFaMl6dSp0PT6eun06ezKAiBtBBeckpPgamgI/f/88zbU06RJUnBEjrIyqU8f6aWXpN69pYEDpWuukebNk+bMkUaPlrZulQYPtr8A8orgglNyeoxr9WoLpG3bpMcfl0aMsOnz50u33CL97nfS9ddbbWvOHPv/wAHprruk739fmjEjN+UAkBaCC07JWXCtXCndfLP07rt2/4UXpK5d7f+nnrIQmz5duvNOm7ZkiXTddfb/uHHS174mvf129uUAkDaCC07JSXDt2SOdd5501VXShAnWXFhdLfXrJ/3iF6HOGTNmWM1qxAibd9Ys6dVXpSFDpNmzpS5dpC++yMXLApAGggtOyUlwnThho8C/+660dKn00Uc2vbpaWr5c2rLF7k+ZYiH19tvShx/atM8/tw4ckvTpp9ZxA0BeEVxwSl5PQP7d7+z6XABaFIILTslrcO3ZQ1Mg0AIRXHAKQz4BILjgFIILAMEFpxBcAAguOIXgAkBwwSkXXXSRevbsWehiACggggtOueCCC9SxY8f0n7hypTRqlA2gm+g2Zoz0xBM2gjyAFongglMef/xxtW/fXuPGjUvviXv2SO+9J61dm/j2/vvSunU28juAFonggnOefPJJtWvXTgMHDlQtNSOgzSG44KTZs2frG9/4hrp166aqqqpCFwdAHhFccNbixYt19tln6/zzz9fmzZsLXRwAeUJwwWlr167Veeedp/PPP1+ffPJJoYsDIA8ILjhvx44d6tChg8455xwtXbq00MUB0MwILrQK1dXV6tKli772ta/p5ZdfLnRxADQjggutxrFjx3TbbbfpK1/5iiZPnhx/xoYGadUq6Z577LZunU2fO9euv/Xww9KxY3kpM4D0EVxoVRoaGjR27Fh95Stf0ZAhQ1RXVxc70/790vjx0uLF0qOPSrfeKq1ZI113nfT665LPZ9fiAtAiEVxolaZOnap27dppwIABOnHiROSDp05JNTX2/9Kl0sCB0tSp0qBBNu2VV6Q+fewKyVOn2ogaw4dL27dLf/+79Je/SKdPS9On2zQAeUVwodWaO3euvvnNb2rChAneMxw5IvXuLS1aJD3+uDR6tE1/6y2puFj69a+lH/9YWrLEhou67Tbpo4+kG2+0kBs2TDp6NH8vCIAkggut2NatW3Xuuedq4MCBsQ/u3y8NHixNmmT3p0yR+vWz/198UbrrLmnaNOnee23axx9LP/uZ/f/II1K7dhZiAPKO4EKrVF5ern//93/XhRdeqJ07d0Y+ePiw1LGjdPXV0oIFNkbhunVSp07SzJnSTTdJZWXSjBnSBRdY02FxseT323iHAwZYJ4477rBlAcgrggutzty5c/Wtb31LF110UWxoSdK+fXbc6pFHrJNGaalNX7rUpr/wgt1/+mlrFiwpkX77W2sWXLRIWrbMjnFNmyYx3BSQdwQXWpVp06apffv26tevnw4dOpTdwh591DplAGhRCC60Gg8//LDatWunESNGeHeDT9fKldLChdkvB0BOEVxw3unTpzV06FC1b99ek4KdLQC0WgQXnHbgwAH17NlTX//61/Xiiy8WujgA8oDggrO++OILXXHFFWrfvr3efPPNQhcHQJ4QXHDSp59+qh/96Ef69re/rSVLlhS6OADyiOCCc5YtW6azzz5bF154oT777LNCFwdAnhFccErwHK3OnTtr7969qT9x0yZp1ixp9uzEt5dekubNs/O0ALRIBBeccskll+iHP/yhjqV72ZGPPpImT5YCgcS3KVNsyKdTp5rnBQDIGsEFpxQVFenGG28sdDEAFBDBBadcfPHF6t69e6GLAaCACC44heACQHDBKQQXAIILTiG4ABBccArBBYDgglMILgD5Ca4zZ6SGhshpx49LXtdLOnBAqq3NeREIrtaB4ALQvMG1YYNd7vzaa6UPPwxNX7xY6tVL6tFDeuIJm3b6tPSb30h9+kg33CCtWZPTohBcrQPBBaB5g2vlSruK7Pe+Z/9LUnW1BdmiRdKuXdLPfiZ9/LE0d67Uv79dHn3KFKlnz8jRC44ckWpq7P/6eqvFBdXVRd73QHC1DgQXgOZvKjx9WurQQSovt/vvvGPBdfKk3b/3XmnqVGnUKBtyR5I++0y66ipp/35pzBhpyBBp4ECroa1cKVVUWK2spkZavlzy+aR9+xIWg+BqHQguAM0fXPv2SZdcIq1YYfdLS6Xu3a3WJEkPPCCNHSvddZcNgipJu3dLV1whrVsndeliwVRbK731ltSpk7R3rzRokDRxovSLX4SelwDB1ToQXADyH1wvvGBhFB5cv/61NGBAKIC++MJqXNu3S8XF0htvRC5ryxZrcvyXf5Fuuy2lYhBcrQPBBaD5g+vECWsqXLvW7q9cKXXsaNMlC57Zsy3AHn/cpr3/vnT11dYUePPNVkuTpG3bpMsvlw4elD74QDr/fGsyDC4rAYKrdSC4ADRvcO3YYbWlc86x3oOffGLd4Pv2le67T3ruOfv/8GFp9WoLq9dfl+64Q3rsMVtGjx52e+cdmz5mjFRZafMuW2bHyEaNSnr9JIKrdSC4ADRvcC1fbgH1wAPS/fdLM2fa9C+/lB58UBo/Xtq6NTT/ggUWTM8+GzqXq1+/0HGwSZOsU0dFhc0jSZs3S9OmhTp7xEFwtQ4EF4CWP3JG587SK69kvRiCq3UguAC0/OB64QW7em2WCK7WgeAC0PKDK0cIrtaB4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCCwDBBacQXAAILjiF4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCCwDBBacQXAAILjiF4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCCwDBBacQXAAILjiF4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCCwDBBacQXAAILjiF4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCCwDBBacQXAAILjiF4AJAcMEpBBcAggtOIbgAEFxwCsEFgOCCUwguAAQXnEJwASC44BSCC0CbCa6nnnpKX/3qV1VfX1/ooiALl156qbp27VroYgAooDYTXJMnT1a7du20bds2ffnll9wcvf3whz8kuIA2rs0E19q1a3XuueeqXbt23By+nXXWWSotLS305gSggNpMcEnS+vXrNWfOHG4O31auXKmGhoZCb0oACqhNBRcAwH0EFwDAKQQXAMApBBcAwCkEFwDAKQQXAMApBBcAwCkEVzYaGuyWjTNnclOWoFyUCQBaMIIrG7/5jTR1aubP371bGjxY+vzz1ObftEl6801p5cr44TRunPT665mXKVpVlVRdLe3YYffr66UlS6RFi6TaWpu2f7+0YIH03nuh523dKs2bJ23ZkruyAIAIruwMGyaNH5/586urpeuvlzZsSD7v88/bvI88It12m7Rsmfd8t98u/elPmZcpqL5e+uILaexY6fe/l+69V6qrk379a6lLF6lnT+m++6QjR6TiYunOO6Wrr5bmzJEqK+3/e++VOnWS1q/PvjwA0IjgysZ990ljxkh//7u0dm1oelWV9Le/SStW2P2aGmnzZmn5cmnPHunYMXvOn/8sXXONtHOnhcKSJVJ5udWmDh+2QHv7bQupjh2lNWtCy/vnP+3/NWukhQul7dvt/qBBUnAsv82b7bFg2Y4ft2lvvy3t2hUq7+HDVpsLHzl/40apd2/ppz+Viops/bNmWWht3Srt3StddZX09NNSr172nFdesf8nTpT8fps2dKh0//05esMBgODKztixtlN/7DHpyiutprNli4XRqFFS167SM89Y095//Zd0zz3WnDZwoNVQbr5Z+u53pW3brCYzaJB0003S5MkWPt/+tjRhgjRypD032pNPWi1s7Fipc2fpk0+kESOkl1+W/vEP6YorrOnw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" alt="" />

这是一道2014百度秋招的笔试题,解题关键在于如何用css实现出那个小三角形,在说实现方法之前让我们先来看一小段代码理解一下border属性吧。

</style>

#demo1{
width: 0;
height: 0;
border-top: 50px solid #f69;
border-left: 50px solid #000;
border-bottom: 50px solid red;
border-right: 50px solid yellow;
} </style>
<body> <div id="demo1"></div> </body>

这是在浏览器打开后的效果

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAACZCAIAAAB2TJV8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADmklEQVR4nO3cUW7bMBCE4UnRG6XHsM9U5Uq1r+FcSX1IUKCtY0vikjuznB96tUDgA22JJPyyriucQt+yB+C2ZiqZTCWTqWQylUymkslUMplKJlPJZCqZTCWTqWQylUymkslUMplKJlPJZCqZTCWTqWQylUymkslUMplKJlPJZCqZTCXT98bPv/04/3w9hwyleKcLzpeWG7TOquV2fbs1jWCKThecr433CPgCtNaTIpwQ9VtlrS8LckLgY4W17hTnhNgnQGv9VagTwh/WrfVZtBN6vFdZq4cTOr0CT63Vxwn9Vism1ermhK4LS9Np9XRC7zXAibQ6O2HAcu0UWv2dMGZlvbjWECcM2wQpqzXKCSP3qwpqDXTC4K3FUlpjnTB+F7iI1nAnpGzYy2tlOCHrbIWwVpITEo/BSGrlOSH3xJKYVqoT0g+XyWhlOyGdChJaBE5goAK5FocTSKhAq0XjBB4qEGoxOYGKClRaZE5gowKJFp8TCKmQrkXpBE4qJGqxOoGWCilaxE5gpsJgLW4nkFNhmBa9E/ipMEBLwQkSVOiqJeIEFSp00tJxghAVwrWknKBFhUAtNSfIUSFES9AJilRo1NJ0gigVDmvJOkGXCge0lJ0gTYVdWuJOUKfCRi19JxSgwlOtEk6oQYUHWlWcUIYKd7UKOaESFf7RquUEAGtb2cO/0/J6Wn+d1hV8V1OlZtVntyvea82nj4rNqgVYP64lfQ4Fz6pSVMsfJ1ItUwH434lRy1RfOdFpTU+1PHDi0pqb6rkTkdbEVFudWLRmpdrnRKE1JdURp3yt+aiOOyVrTUbV6pSpNRNVjFOa1jRUkU45WnNQxTslaE1A1ctptFZ1qr5OQ7VKU41wGqdVl2qc0yCtolSjnUZoVaTKcequVY4q06mvVi2qfKeOWoWoWJx6aVWh4nLqolWCitEpXkufitcpWEucit0pUkuZSsMpTEuWSskpRkuTSs8pQEuQStWpVUuNStupSUuKqoLTcS0dqjpOB7VEqKo5HdFSoKrptFuLnqqy0z4tbqr6Tju0iKlmcdqqxUo1l9MmLUqqGZ2ea/FRzev0RIuMananR1pMVHZ6qEVDZadnWhxUdtqgRUBlp21a2VR22qyVSmWnPVpNvaybV8ddbhX/ELVoppLJVDKZSiZTyWQqmUwlk6lkMpVMppLJVDKZSiZTyWQqmUwlk6lkMpVMppLJVDKZSiZTyWQqmUwlk6lk+g00nSnaog3UdwAAAABJRU5ErkJggg==" alt="" />
因为div的宽高都被设置为零了,所以四个颜色的小三角形其实就代表着四条边
当我们把其中一条边的颜色设置为透明transparent时,这个div就变成这个样子了:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAACDCAIAAAA/Ng+CAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADWElEQVR4nO3cW47aQBSE4ZooOyLLGNYUz5qGZYQ1OQ8ZRQoiA2OfS9Vx/eLVqNGHwe5u+WVdVzj6vnUPwD2VnTSyk0Z20shOGtlJIztpZCeN7KSRnTSyk0Z20shOGtlJIztpZCeNvu88/u3H+efpHDKU4Z1PeD1tPnrv+bRcL2/X951vMr99SAj53TPVg3YjIer/yVT/LQIJgdcRprpTEBJir/dM9U9xSAi/LjfVR6FIyLh/MlU4EpLucw9NlYCEvPmIg1LlICF13uhwVGlIyJ7fOxBVJhIK5mEPQZWMhJr58uFU+UgoW9cYS1WChMr1p4FUVUgoXiccRVWIhPr13CFUtUhoWXeXpypHQtf+CGGqDiQ07mORpGpCQu9+IzGqPiS07wuToWpFQrsTJKi6kcDgBHIqAiSQOIGWigMJPE4gpKJBApUTqKiYkMDmBBIqMiQQOqGdig8JnE5opKJEAq0TWqhYkcDshGIqYiSQO6GMihsJ/E4ooKJHgoQTUqkUkKDihCQqESQIOSGcSgcJWk4IpJJCgpwTQqjUkKDohJ1UgkgQdcJmKk0k6DphA5UsEqSd8CUqZSSoO+FJKnEkDHDCQyp9JMxwwidUI5Awxgl3qaYgYZITbqgGIQHAuq/u4d9pOb2u7792fi62Rp1PH10vuF66BxHdTufu4d+2AOuf17KEfJFJGuW0/EUaRzXHablBmkU1xGm5izSIaoLT8gnSFCp5p8dII6i0nZ5F0qcSdvoakjiVqtMWJGUqSaftSLJUek57kTSpxJxikASplJwikdSoZJzikaSoNJyykHSoBJxykUSo2J0qkBSoqJ3qkOipeJ2qkbipSJ16kIipGJ06kVip6Jz6kSipuJxYkPioiJy4kMioWJwYkZioKJx4kWio+p3YkTiomp00kAioOp2UkLqp2pz0kFqpepxUkfqoGpy0kZqoqp0mIHVQlTrNQSqnqnOahlRLVeQ0E6mQqsJpMlIVVbrTfKQSqlynoyDlUyU6HQspmSrL6YhImVQpTsdFSqOKdzo6Ug5VsJORkqginYyURxXmZKRUqhgnI2VTBTgZqYBqr5ORaqhe1u5n37hnmvjc0YnZSSM7aWQnjeykkZ00spNGdtLIThrZSSM7aWQnjeyk0W8lcUCH+to1EwAAAABJRU5ErkJggg==" alt="" />
缺了一个小三角形,因为它被设置为透明了,说明它确实是一条边。那这样的话,我们接下来要是再把其中的两条边颜色给设置为透明,是不是就能得到一个小三角形了呢?
 
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAABHCAIAAAClA9+5AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABoklEQVR4nO3cQW4DMQxD0UnRe8c+ubMpECAo2pmxJJI2P7zwkngH0GOMcbjyvtADNs3umOyOye6Y7I7J7pjsjsnumOyOye6YNN17P3pHj5jqGz3ger0frf38n0/kkpmGVq2N43i/1tCDbibl/oGuTK/j/iu6LL2I+x/omvQK7v+iC9LTu59EV6Pndr+ELkVP7H4DXYee1f02ugg9pfskugI9n3sIOj09mXsgOjc9k3s4OjE9jXsSOis9h3sqOiU9gXsBOh892r0MnYwe6l6MzkSPc4eg09CD3IHoHPQIdzg6AX25Owk6mr7WnQodSl/oToiOo69yp0UH0Ze4k6Mj6PPdJdDL6ZPdhdBr6TPd5dAL6dPcRdGr6HPcpdFL6BPcF0DPp492XwY9mT7UfTH0TPo49yXR0+iD3BdGz6GPcF8ePYF+2n0T9Gj6Ofet0EPpJ9w3RI+jv+u+LXoQ/S33zdEj6K+7Gz2C/qK70YPor7gbPY7+tLvRQ+nPuRs9mv6Eu9ET6B/Dd5kRad650s/umOyOye6Y7I7J7pjsjsnumOyO6QW4WKur6eHnJQAAAABJRU5ErkJggg==" alt="" />
 
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAB7CAIAAABy0aC8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACKklEQVR4nO3dS24DMQwE0UqQeyc+uXOBMLBnJLKbYq21EB5Gv9V8PJ9Ppr/6rJ6AbkMTNjRhQxN2Gs3j9aFH0Tzg5/XR59C858IxNG+7cAbNFRcOoLnoQnea6y60prnlQl+auy40pVngQkeaNS60o1nmQi+alS40olnsQhea9S60oNnigj/NLhfMaTa64Eyz1wVbmu0ueNJkuGBIk+SCG02eC1Y0qS740GS7YEJT4IIDTY0L8jRlLmjTVLogTFPsgipNvQuSNBIu6NGouCBGI+SCEo2WCzI0ci5o0Ci6IEAj6kI1ja4LpTTSLtTRqLtQRGPgQgWNhwvpNDYu5NI4uZBIY+ZCFo2fCyk0li7sp3F1YTONsQvVbyjpttJ8z1fzT8Y6CQvKVSdnr7HUSduG/XQyTygzneTD20kn/15jo1Ny5fPQqboNG+gUPhTUdWrfUNI65c9LXZ1yGmR1FGjQ1BGhQVBHhwY1HSkapHTUaNDREaRBREeTBgUdWRrKdZRpqNURp6FQR5+GKh0LGkp0XGjI1zGiIVnHi4ZMHTsa0nQcacjRMaUhQceXht061jRs1XGnYZ9OAxo26fSgYYdOGxqW63SiYa1OMxoW6vSjYZVOSxqW6HSl4b5OYxpu6vSm4Y5Oexou65xAwzWdQ2i4oPO1Zx6afb81+mN+CRp1zoJ6u6EJG5qwoQkbmrChCRuasKEJG5qwoQkbmrChCRuasKEJG5qwoQkbmrBfaJFo8kPGfvIAAAAASUVORK5CYII=" alt="" />
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABSCAIAAAAQMYfVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACCElEQVR4nO3c3U3DQBBF4QOio7QRqoU2UlN4QEIgIPbaO3dm7HterUjWp8g/uyM/3e93XHzP2SdwlgwtytCiDC3K0KIMLcrQogwtytCiDC3K0KIMLcrQol4Wjr/feLtJzqR5rxeulwfHl/7R1wuvj37vYFmZVZcOWz9uhTJrr9G2/q91ygzcDG39u9XKjD112Pp7I8oMP97Z+rNBZbY8R9t6XJmNLyxntt6kzPY3w3Nab1Vm1yv42ax3KLN3reM81vuUmbCodAbr3crMWb07tvUMZaYtkx7VepIyM9ejj2c9T5nJC/9Hsp6qzPwdlmNYz1YmZCuru3WAMlF7hn2tY5QJ3JztaB2mTOwueC/rSGXCxw26WAcro5jrqG8dr4xogKaytUQZ3aRSTWuVMtKRsGrWQmXUs3d1rLXKJAw5VrCWK5MzTZprnaFM2thulnWSMpnz0XrrPGWSB9GV1qnK5E/8a6yzlcmHJt66gDIloIm0rqFMFWhirMsoUwia2daVlKkFzTzrYsqUg2aGdT1lKkKzz7qkMkWh2WpdVZm60IxbF1amNDQj1rWVqQ7NOuvyyjSAZsm6gzI9oPnfuokybaD5y7qPMp2g+WndSpnlD6NU6wu3lTLw5O9Ha2p16eicoUUZWpShRRlalKFFGVqUoUUZWpShRRlalKFFGVqUoUUZWpShRRla1Ac34Gs/v3P2gwAAAABJRU5ErkJggg==" alt="" />
  aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAB7CAIAAAB7OgDGAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB+ElEQVR4nO3bWY7CUAxE0UevnKy8+gtF/oR4qLLqLiBCR0Am+wXguE9/0x+AK3OEzBEyR8gcIXOEzBEyR8gcIXOE8jmu60o/Zl/I7pzzfr/TD9tTCYeuSBWHqEghh6JILYecSDmHlkgHh5BIE4eKSB+HhEgrB79INwe5yAAHs8gMB63IGAenyCQHocgwB5vIPAeVCAUHjwgLB4kIEQeDCBfHuAgdx6wII8egCCnHlAgvx4gINUe/CDtHs4gAR6eIBkebiAxHj4gSR4OIGEe1iB5HqYgkR52IKkeRiDBHhYg2R7qIPEeuyAaORJElHFkiezhSRFZxPBfZxvFQZCHHeSCyk+P8KrKW4/wkspnjfC+ynON8KbKf43wj4uWv2Ppvh38sd/4rvfOJ9s6XYXe+SE+wwD4O3+CnWWAThx8OJltgB4dfLJRYQJ3DLyULLaDL4YGGcgsocngYqskCWhwepGy1gAqHh7AHLMDP4QWOMQswc3j5a9gCnBxeHKWwABuHl86JLMDDwWABEg4SCzBw8FhgnIPKArMcbBYY5CC0wBQHpwVGOGgt0M/BbIFmDnILdHLwW6CNQ8ICPRwqFmjgELJANYeWBUo55CxQx6FogSIOUQtUcOhaAHhhemyaKi9/hcwRMkfIHCFzhMwRMkfIHCFzhMwRMkfoHyNxZ/EHu8VyAAAAAElFTkSuQmCC" alt="" />
 
看,按这种办法四个方向的小三角形我们都可以实现出来了。但是这样还不够,看一下题目中的小三角形,它是有两条边的颜色和它内部的颜色不一样的,而我们
 
实现的小三角形都是一个颜色。那怎么办?给我们的小三角形加border-color吗?但别忘了小三角形本身就是一条边哦,给它加边框颜色只会是把整个三角形的
 
颜色替换掉。
 
不过可以用这种小技巧:实现出一个透明的三角形,让它覆盖掉黑色三角形的内部,只留边框,这样不就能得到上面的效果了?!
 
实现小三角形的时候,我使用了伪类:before和:after,这样可以减少不必要的div标签。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>demo</title>
</head> <style>
#demo{
width:100px;
height:100px;
border:2px solid #000;
}
#demo:before{
content:'';
display:block;
width:0;
height:0;
position:relative;
top:10px;
left:100px;
border-left:9px solid #000;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
}
#demo:after{
content:'';
display:block;
width:0;
height:0;
position:relative;
top:-2px;
left:100px;
border-left:7px solid #fff;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
} </style>
<body>
<div id='demo'></div>
<script> </script>
</body>
</html>

效果图:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAB5CAIAAACfhmlZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB5UlEQVR4nO3dsY2DMBhA4Z/TVbAATJDMgcReZJEsQZfsQJ0RsgBpfQXSdSYkIjzp7n0tRkJPlmOTgiKlFIJ80Q/wr1mfZH2S9UnWJ1mfZH3Sd+5CURR7Psef8dL5yblPys79mSfh9d5YLZz7JOuTrE+yPsn6JOuTrE+yPsn6JOuTrL+xx+OxfrD1NzMMQ0RUVXW9XtfekzKWryqnruuI6Pt+zWDrb6/v+4jouu7pyCJl3iHP70tzV7Xsfr83TVOW5TiOh8MhN8x1/yPquk4ptW17PB7P53NumPVJT/7b0nt+V57b7ebKs6vT6dQ0Tdd10zQtpI9wx7k1d5yM+bQVEZfLZeUt7jg3Mxebpqksy7W3WH8rbxTzV5dkfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnWZ9kfZL1SdYnPfm29PzlRn2Ic5+U/cKrduDcJ1mfZH2S9UnWJ1mfZH2S9Uk/LeD+Vwag3KgAAAAASUVORK5CYII=" alt="" />

 

用css画出对话框的相关教程结束。

《用css画出对话框.doc》

下载本文的Word格式文档,以方便收藏与打印。